序言 Vue.js介绍
第1节安装与部署
- 使用<script>标签引入
- 命令行工具(CLI)
第2节创建第一个vue应用
第3节数据与方法
- 数据与方法
第4节生命周期
- 生命周期钩子
第5节模板语法-插值
第6节模板语法-指令
第7节 class与style绑定
- 绑定HTML Class
- 绑定内联样式
第8节条件渲染
第9节列表渲染
第10节事件绑定
第11节表单输入绑定
总结

Vue.js官方教程上的Vue基础部分

序言 Vue.js介绍

概念

Vue.js:渐进式JavaScript框架
渐进式:可以由浅到深的由简单到复杂的方式使用Vue.js

优点

体积小:压缩后33k
更高的运行效率:基于虚拟dom
双向数据绑定:不用再去操作dom对象,把更多的精力投入到业务逻辑上
生态丰富、学习成本低:有大量成熟稳定的UI框架、常用组件

使用场景

web端开发
移动端
跨平台应用开发

第1节安装与部署

使用`<script>`标签引入

下载js文件并用<script>标签引入
- 开发版本:包含完整的警告和调试模式
- 生产版本:删除了警告,经过压缩更小
CDN
- 最新版本(学习):<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 生产环境:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
NPM
- 最新稳定版:$ npm install vue

命令行工具(CLI)

第2节创建第一个vue应用

Vue.js 的核心

是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
Vue.js应用的组成：视图+脚本

创建步骤

html示例

 <div id="app">
     <!--用双大括号声明变量-->
     { { message } } 
 </div>

js示例

 <script type="text/javascript">
     //当引入Vue.js后会声明一个全局变量Vue
     //通过new Vue的方式会返回一个对象app,被称为应用对象
     //new Vue的时候需要传递一个对象做参数
     var app = new Vue({
         el: '#app', //元素,用id选择器选中app对应的div标签
         data: {
             message: 'Hello Vue!'
         }
     })
 </script>

创建应用的实质

每一个Vue应用都是通过Vue()函数创建一个Vue实例开始的
通常我们会使用一个变量接收Vue()函数被new的结果(对象)
虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发。因此在文档中经常会使用vm(ViewModel)这个变量名表示Vue实例

第3节数据与方法

数据与方法

当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

html示例

 <div id="app">
     <!--用双大括号声明变量-->
     { { a } } 
 </div>

js示例

 <script type="text/javascript">
     // 我们的数据对象
     var data = { a: 1 }
        
     // 该对象被加入到一个 Vue 实例中
     var vm = new Vue({
         // 如果我们想让某个属性或变量能够响应式,就要在new Vue()的时候提前声明
         el: "#app",
         data: data //前面的data是vm对象的属性,后面的data是用var定义的对象形式的全新的变量
     })
        
     // 获得这个实例上的属性
     // 返回源数据中对应的字段
     vm.a == data.a // => true
        
     // 设置属性也会影响到原始数据
     vm.a = 2
     data.a // => 2
        
     // ……反之亦然
     data.a = 3
     vm.a // => 3
 </script>

如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。
这里唯一的例外是使用Object.freeze() ，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
除了数据属性，Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。

watch方法:可以观察一个变量的变化,并且为我们获取变化之前和变化之后的结果

 // 语法格式:Vue对象.$watch(要观察的变量,function(newVal,oldVal){})
 vm.$watch('a',function(newVal,oldVal){
     // 这个回调将在 `vm.a` 改变后调用
     console.log(newVal,oldVal);
 })

第4节生命周期

生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期钩子需要些写在new Vue()的时候传递的这个对象内,以属性的方式进行声明。这个属性是个函数, Vue运行的这个应用运行的每个阶段,系统会自动调用这个已声明到的生命周期函数
声明周期函数不能使用箭头函数,箭头函数是没有this的,而this在生命周期过程中是要频繁应用的

html示例

 <div id="app">
     <!--用双大括号声明变量-->
     { { msg } } 
 </div>

js示例

 // 该对象被加入到一个 Vue 实例中
 var vm = new Vue({
     el: "#app",
     data: {
         msg: "hi vue",
     },
     // 在实例初始化之后,数据观测(data observer)和watch/event事件配置之前被调用
     beforeCreate:function(){
         console.log('beforeCreate');
     },
            
     // 在实例化创建完成后被立即调用
     // 在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event事件回调
     // 然而,挂载阶段还没开始,$el属性目前不可见
     created:function(){
         console.log('created');
     },
        
     // 在挂载开始之前被调用,相关的渲染函数首次被调用
     beforeMount:function(){
         console.log('beforeMount');
     },
        
     // el被新创建的vm.$el替换,挂载成功
     mounted:function(){
         console.log('mounted');
     },
        
     // 数据更新时调用
     beforeUpdate:function(){
         console.log('beforeUpdate');
     },
        
     // 组件DOM已经更新,组件更新完毕
     updated:function(){
         console.log('updated');
     },
 });

 // 定时器:3秒后把"hi Vue"改成"change..."
 setTimeout(function(){
     vm.msg = "change...";
 },3000);

第5节模板语法-插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

html示例

 <!-- 在整个页面上使用左右双大括号的方式去包裹一个变量,再在data里去声明属性及其取值 -->
 <span>Message: { { msg } }</span>

通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

html示例

 <!--这个标签不会改变:-->
 <div id="app" v-once>
     { { msg } } 
 </div>

js示例

 <script type="text/javascript">
     var vm = new Vue({
         el:"#app",
         data:{
             msg:"hi vue",
         }
     });
     vm.msg = "hi..." // 毫无作用
 </script>

原始HTML

双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令：

html示例

 <div id="app">
     <p>Using mustaches: { { rawHtml } }</p>
     <p v-html="rawHtml"></p>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         rawHtml:'<span style="color:red">this id should be red</span>'
     }
 });

特性

Mustache 语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令：

html示例

 <div id="app">
     <div v-bind:class="color">test...</div>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         color:'blue'
     }
 });

css示例

 .red{color:red;}
 .blue{color:blue;font-size: 100px;}

语法格式:v-bind:属性="某一变量的值"

使用JavaScript表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。

html示例

 <div id="app">
     <!--表达式-->
     <p>{ { number + 1 } }</p>
     <!--三目运算:?前面可以是个表达式也可以是个变量,这个变量值是true或false-->
     <p>{ { ok ? 'YES' : 'NO' } }</p>
     <!--函数:核心变量是message,将Vue这个字符串以什么都没有为间隔拆分,返回一个数组,将这个数组反序,再连接成一个字符串-->
     <p>{ { message.split('').reverse().join('') } }</p>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         number:10,
         ok:0,
         message:"Vue"
     }
 });

第6节模板语法-指令

指令的概念

指令 (Directives) 是带有v-前缀的特殊特性
指令特性的值预期是单个JavaScript表达式 (v-for是例外)
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

html示例

 <div id="app">
     <!--此处我们使用v-if进行条件渲染,p标签是否会被渲染取决于seen这个属性--> 
     <p v-if="seen">现在你看到我了</p>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         seen:true
     }
 });

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
v-bind指令可以用于响应式地更新 HTML 特性：

html示例

 <div id="app">
     <!-- 在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 -->
     <a v-bind:href="url">...</a>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         url:"https://cn.vuejs.org/v2/guide/syntax.html"
     }
 });

v-on 指令，它用于监听 DOM 事件：

 <div id="app">
     <!-- 在这里参数是监听的事件名 -->
     <a v-on:click="doSomething">...</a>
 </div>

修饰符

修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

html示例

 <div id="app">
     <!--使用@click这样的指令可以为某一个元素绑定对应的事件-->
     <div @click="click1">
         <!--先执行click2,再执行click1-->
         <!--<div @click="click2">-->
         <!--.stop就是Vue的一个修饰符,当前的click2事件执行完毕后就停下来-->
         <div @click.stop="click2">
             click me
         </div>
     </div>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         seen:false,
         url:"https://cn.vuejs.org/v2/guide/syntax.html"
     },
     methods:{ //在初始化Vue对象时使用methods这样的属性内部使用键值对的形式去声明方法和方法对应的函数体
         click1:function(){
             console.log('click1...');
         },
         click2:function(){
             console.log('click2...');
         }
     }
 });

第7节 class与style绑定

绑定HTML Class

对象语法:我们可以传给v-bind:class一个对象，以动态地切换 class：

html示例

 <div id="app">
     <!--active属性是否能绑定到div标签里,取决于isActive的值-->
     <div v-bind:class="{ active:isActive }" style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
         hi Vue
     </div>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         isActive:true
     }
 });

css示例
```
 .active{background: #ff0000;}
```

html示例

 <!-- 你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。 -->
 <div id="app">
     <!--active属性是否能绑定到div标签里,取决于isActive的值-->
     <div class="test" v-bind:class="{ active:isActive,green:isGreen }" style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
         hi Vue
     </div>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         isActive:true,
         isGreen:true
     }
 });

css示例

 .test{font-size: 30px;}
 .active{background: #ff0000;}
 .green{color:#00ff00;}

数组语法:我们可以把一个数组传给v-bind:class，以应用一个 class 列表：

 <div id="app">
     <!--v-bind class语法还支持数组形式,里面用静态的方式添加样式-->
     <!--里面如果是动态的,支持通过三元运算的方式来为某一个具体的样式进行动态的赋值-->
     <div class="test" v-bind:class="[ isActive ? 'active' : '' , isGreen ? 'green' : '' ]" style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
         hi Vue
     </div>
 </div>

绑定内联样式

对象语法:v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

html示例

 <div id="app">
     <!--前面的color是style的属性,后面的color是变量-->
     <!--使用三元运算来进行样式的绑定-->
     <div :style="{color : color,fontSize:size,background:isRed ? '#ff0000':''}">
         hi Vue
     </div>  
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         color:'#00ff00',
         size:'50px',
         isRed:true
     }
 });

第8节条件渲染

v-if

v-else-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

html示例

 <div id="app">
     <div v-if="type === 'A'">
         A
     </div>
     <div v-else-if="type === 'B'">
         B
     </div>
     <div v-else-if="type === 'C'">
         C
     </div>
     <div v-else>
         Not A/B/C
     </div>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         type:""
     }
 });

v-show

用于根据条件展示元素的选项是v-show指令。

html示例

 <div id="app">
     <!--不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。-->
     <h1 v-show="ok">hello</h1>
 </div>

js示例

 var vm = new Vue({
     el:"#app",
     data:{
         ok:false //通过控制台可以看到h1标签内容,只是页面不显示display:none
     }
 });

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

第9节列表渲染

用 v-for 把一个数组对应为一组元素

我们可以用v-for指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。

html示例

 <ul id="example-1">
     <li v-for="item in items">
         { { item.message } }
     </li>
 </ul>

js示例

 var example1 = new Vue({
     el: '#example-1',
     data: {
         items: [
             { message: 'Foo' },
             { message: 'Bar' }
         ]
     }
 })

在v-for块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。

html示例

 <ul id="example-2">
     <li v-for="(item, index) in items">
         { { parentMessage } } - { { index } } - { { item.message } }
     </li>
 </ul>

js示例

 var example2 = new Vue({
     el: '#example-2',
     data: {
         parentMessage: 'Parent',
         items: [{
             message: 'Foo'
         }, {
             message: 'Bar'
         },]
     }
 })

在 v-for 里使用对象

你也可以用 v-for 来遍历一个对象的属性。

html示例

 <ul id="v-for-object" class="demo">
     <li v-for="value, key in object">
         { { key } } : { { value } }
     </li>
 </ul>

js示例

 new Vue({
     el: '#v-for-object',
     data: {
         object: {
             title: 'How to do lists in Vue',
             author: 'Jane Doe',
             publishedAt: '2016-04-10'
         }
     }
 })

维护状态

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：

 <ul id="v-for-object">
     <!--:key等同于v-bind:key-->
     <li v-for="value, index in object" :key="index">
         { { index } } : { { value } }
     </li>
 </ul>

第10节事件绑定

监听事件

可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。

html示例

 <div id="example-1">
     <button v-on:click="counter += 1">Add { { counter } } </button>
 </div>

js示例

 var example1 = new Vue({
     el: '#example-1',
     data: {
         counter: 0
     }
 })

事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

html示例

 <div id="example-2">
     <!-- `greet` 是在下面定义的方法名 -->
     <!--有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法-->
     <button v-on:click="greet('abc',$event)">Greet</button>
 </div>

js示例

 var example2 = new Vue({
     el: '#example-2',
     data: {
         name: 'caoyang'
     },
     // 在 `methods` 对象中定义方法
     methods: {
         greet: function(str,e) {
             // `this` 在方法里指向当前 Vue 实例
             alert('Hello ' + this.name + '!')
             // `event` 是原生 DOM 事件
             if(event) {
                 alert(e.target.tagName)
                 console.log(e)
             }
         }
     }
 })

 // 也可以用 JavaScript 直接调用方法
 example2.greet() // => 'Hello caoyang!'

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

 <!-- 阻止单击事件继续传播 -->
 <a v-on:click.stop="doThis"></a>

 <!-- 提交事件不再重载页面 -->
 <form v-on:submit.prevent="onSubmit"></form>

 <!-- 修饰符可以串联 -->
 <a v-on:click.stop.prevent="doThat"></a>

 <!-- 只有修饰符 -->
 <form v-on:submit.prevent></form>

 <!-- 添加事件监听器时使用事件捕获模式 -->
 <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
 <div v-on:click.capture="doThis">...</div>

 <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
 <!-- 即事件不是从内部元素触发的 -->
 <div v-on:click.self="doThat">...</div>

v-on指令可以绑定html元素拥有的所有的事件

第11节表单输入绑定

基础用法

你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。

html示例

 <div id="app">
     <input v-model="message" placeholder="edit me">
     <p>input: { { message } }</p>

     <textarea v-model="message2" placeholder="add multiple lines"></textarea>
     <p style="white-space: pre-line;">textarea: { { message2 } }</p>

     <input type="checkbox" id="checkbox" v-model="checked">
     <label for="checkbox">{ { checked } }</label>
     <br>

     <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
     <label for="jack">Jack</label>
     <input type="checkbox" id="john" value="John" v-model="checkedNames">
     <label for="john">John</label>
     <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
     <label for="mike">Mike</label>
     <br>
     <span>Checked names: { { checkedNames } }</span>
     <br>

     <input type="radio" id="one" value="One" v-model="picked">
     <label for="one">One</label>
     <input type="radio" id="two" value="Two" v-model="picked">
     <label for="two">Two</label>
     <br>
     <span>Picked: { { picked } }</span>
     <br>

     <select v-model="selected">
         <option disabled value="">请选择</option>
         <option>A</option>
         <option>B</option>
         <option>C</option>
     </select>
     <br>
     <span>Selected: { { selected } }</span>
 </div>

js示例

 var vm = new Vue({
     el: '#app',
     data: {
         message: "",
         message2: "",
         checked: true,
         checkedNames: [],
         picked: '',
         selected: ''
     }
 })

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

 <!-- 当选中时，`picked` 为字符串 "a" -->
 <input type="radio" v-model="picked" value="a">

 <!-- `toggle` 为 true 或 false -->
 <input type="checkbox" v-model="toggle">

 <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
 <select v-model="selected">
     <option value="abc">ABC</option>
 </select>

复选框:

 <input
     type="checkbox"
     v-model="toggle"
     true-value="yes"
     false-value="no"
 >

 // 当选中时
 vm.toggle === 'yes'
 // 当没有选中时
 vm.toggle === 'no'

单选按钮

 <input type="radio" v-model="pick" v-bind:value="a">

 // 当选中时
 vm.pick === vm.a

选择框的选项

 <select v-model="selected">
     <!-- 内联对象字面量 -->
     <option v-bind:value="{ number: 123 }">123</option>
 </select>

 // 当选中时
 typeof vm.selected // => 'object'
 vm.selected.number // => 123

表单提交

在html文件中加一个提交按钮

 <button type="button" @click="submit">提交</button>

 methods:{
     submit:function(){
         console.log(this.message); //只打印出单行文本的内容
         // 声明一个对象形式的变量,将表单所有的值收集起来
         var postObj = {
             msg1:this.message,
             msg2:this.message2,
             checkval:this.checkedNames
         }
         console.log(postObj);
     }
 }

总结

序言 Vue.js介绍
1. 首先，什么是Vue.js？
2. Vue.js有什么优点呢？
第一节安装与部署
1. 怎么安装和部署Vue.js呢？
第2节创建第一个vue应用
1. 怎么创建Vue应用呢？
2. Vue.js应用由什么组成呢？
3. Vue.js应用的视图和脚本如何连接呢？
第3节数据与方法
1. 如何创建一个Vue实例呢？
2. Vue实例怎么传递参数实现响应式呢？
3. Vue除了属性，还有什么方法呢？
第4节生命周期
1. Vue实例创建的生命周期是什么呢?
2. 生命周期钩子如何使用呢?
3. 生命周期钩子有哪些常用函数呢?
第5节模板语法-插值
1. Vue模板语法如何进行文本插值呢?
2. 双大括号会将数据解释为普通文本,怎样输出真正的HTML呢?
3. 如何使用Vue.js为HTML标签动态的绑定属性呢？
4. Vue.js如何使用JavaScript表达式？
第6节模板语法-指令
1. Vue.js有哪些指令呢？
2. Vue指令怎样接收参数实现响应式呢？
3. Vue.js的修饰符有哪些呢？
第7节 class与style绑定
1. 学习了v-bind指令，怎样用它实现class的绑定呢？
2. 怎样动态的绑定class样式呢？
3. 怎样绑定内联样式呢？
4. 怎样动态的绑定style样式呢？
第8节条件渲染
1. v-if指令怎样实现条件渲染呢？
2. v-show指令怎样实现条件渲染呢？
3. v-if和v-show的区别是什么呢？
第9节列表渲染
1. v-for指令怎样把一个数组对应为一组元素？item,index
2. v-for指令怎样遍历对象属性？key,value
3. Vue怎样重用和重新排序现有元素？
第10节事件绑定
1. v-on怎样监听事件？
2. v-on怎样通过JavaScript函数实现事件处理？
3. Vue.js有哪些事件修饰符？
第11节表单输入绑定
1. v-model怎样实现双向数据绑定？
2. 如何对表单元素的默认值进行操作？
3. 怎么完成表单提交？

Vue.js基础

序言 Vue.js介绍

概念

优点

使用场景

第1节 安装与部署

使用<script>标签引入

命令行工具(CLI)

第2节 创建第一个vue应用

Vue.js 的核心

创建步骤

创建应用的实质

第3节 数据与方法

数据与方法

第4节 生命周期

生命周期钩子

第5节 模板语法-插值

文本

原始HTML

特性

使用JavaScript表达式

第6节 模板语法-指令

指令的概念

参数

修饰符

第7节 class与style绑定

绑定HTML Class

绑定内联样式

第8节 条件渲染

v-if

v-show

v-if vs v-show

第9节 列表渲染

用 v-for 把一个数组对应为一组元素

在 v-for 里使用对象

维护状态

第10节 事件绑定

监听事件

事件处理方法

事件修饰符

第11节 表单输入绑定

基础用法

值绑定

表单提交

总结

第1节安装与部署

使用`<script>`标签引入

第2节创建第一个vue应用

第3节数据与方法

第4节生命周期

第5节模板语法-插值

第6节模板语法-指令

第8节条件渲染

第9节列表渲染

第10节事件绑定

第11节表单输入绑定