1. 把字符串渲染到页面上有哪些方式？
文档碎片 document.createDocumentFragment利用原生js拼接字符串利用模板引擎拼接利用Vue插值语法利用ES6 `` 反引号拼接字符串2. v-bind 和 v-on的区别
v-bind 绑定属性v-on 绑定事件3. 插值表达式中可以放入函数调用 这个函数是有返回值的
4. 关于驼峰命名 在html标签中 使用短横线的方式 首字母都小写，单词之间加上短横线 （DOM元素是不区分大小写的）
① 就是一个自定义属性 ② Vue 中指令都是以 v- 开头
背后的原理：先通过样式隐藏内容，，然后在内存中进行值的替换，替换好之后再显示最终的结果。
数据绑定指令：（将数据填充到标签中）
v-text ① 用于将数据填充到标签中，作用与插值表达式类似，但是没有闪动问题 ② 如果数据中有HTML标签会将html标签一并输出 (比如 h1没有样式且显示） ③ 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
v-html ① 用法与v-text类似，但是它可以将HTML片段填充到标签中 ② 可能有安全问题，一般只在可信任内容上使用v-html（本网站，不跨域），永不用在用户提交的内容上
v-pre 当你只想输出‘{{msg}}’这样的字符串时就用这个
v-once 执行一次性的插值（当数据改变时，插值处的内容不会继续更新）这样可以提高性能，不需要再监听了
那么怎么使用呢？—— 放到标签里。
<p v-cloak>{{msg}}</p> <p v-html="msg"></p> <p v-text="msg"></p> <p v-pre>{{msg}}</p>如何理解响应式： ① h5中的响应式（屏幕尺寸的变化导致样式的变化） ② 数据的响应式（数据的变化导致页面内容的变化）
需要绑定一个值：
<input type="text" v-model='id'/>语法：v-on 例如：v-on:click / @click；
v-on事件函数中传入参数
① 直接绑定函数名称 那么默认会传递事件对象作为事件函数的第一个参数
<button v-on:click='handle1'>点击1</button>②绑定函数调用 那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
<button v-on:click='handle1(123，456，$event)'>点击1</button> 事件修饰符 可以多个写在一起，但是先后顺序是会有影响的 <!-- 阻止单击事件继续传播(冒泡) --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 即阻止冒泡也阻止默认事件 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> 按键修饰符 如下： <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit"> <!-- -当点击enter 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> <!--当点击enter或者space时 时调用 `vm.alertMe()` --> <input type="text" v-on:keyup.enter.space="alertMe" > 自定义按键修饰符 在vue中可以通过config.keyCodes 自定义按键修饰符别名 <div id="app"> <input type="text" v-on:keydown.f5="prompt()"> </div> <script> Vue.config,keyCodes.f5=116; </script>手动的实现双向数据绑定——v-model的底层实现原理
<input v-bind:value='msg' v-on:input='msg=$event.target.value' type="text">如何绑定一个对象？
通过 v-bind:class = { 键：值 }键 代表类名值 为true/false。t-显示 f-不显示如何绑定一个数组？
通过 v-bind:class = ’ [ 值1，值2 ] ’值1，值2 对应data中的数据，data中的内容放的是类名（只要名字就可以了，不用 . ) <div v-bind:class='[activeClass,errorClass]'>测试样式</div> <script src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#computor', data: { activeClass: 'active', errorClass: 'error' }, methods: { add: function(){ this.sum = this.a + this.b; } } }); </script>v-if => v-else-if => v-else
多个元素 通过条件判断展示或隐藏某个或多个元素（符合条件的才生成）进行两个视图间的切换 <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> <script> var vm = new Vue({ el:'#app', data:{ type:'C' } }) </script>– 数组里面的数值可以是对象，也可以是普通元素
1. 语法：
v-for =" (item,index) in 数组名 "item— 数组中的每一项index— 索引2. key的作用：
key来给每个节点做一个唯一标识key的作用主要是为了高效的更新虚拟DOM1. 语法
v-for=" (value,name,index) in 对象名 "item— 对象中的每一项key— 对应的键名index— 对应的索引选项卡案例
1. 单选框如何实现单选
两个单选框需要同时通过v-model 双向绑定 一个值每一个单选框必须要有value属性 且value值不能一样当某个选框选中的时候v-model 会将当前的value值 改变data中的数据2. 复选框如何实现单选
复选框需要同时通过v-model 双向绑定一个值每一个复选框必须要有value属性 且value值不能一样当某一个复选框选中的时候v-model 会将当前的value值改变 data 中的数据3. 如何实现获取下拉框的选中状态
需要给select 通过v-model 双向绑定 一个值每一个option 必须要有value属性 且value 值不能一样当某一个option选中的时候v-model 会将当前的value值 改变 data中的数据4. 如何获取文本域中的值
通过v-model 绑定一个值
使用自定义的指令，只需在对用的元素中，加上’v-'的前缀形成类似于内部指令’v-text’的形式。
法一：Vue.directive 注册全局指令
<input type="text" v-focus> <script> //注册一个全局自定义指令 v-focus Vue.directive('指令名称',{ inserted:function(el){ //聚焦元素 el.focus(); } }); new Vue({ el:'#app' }); </script>注意点：
在自定义指令中 如果以驼峰命名的方式定义 如：Vue.directive(‘focusA’,function(){}) 在html中使用的时候，只能通过 v-focus-a 来使用Vue.directive 注册全局指令——带参数：
<input type="text" v-color='msg'> <script> /* ① bind—— 只调用一次，在指令第一次绑定到元素上时调用（在这里可以进行一次性的初始化设置） ② el——当前自定义指令的DOM元素（你指令放在哪就是哪个元素） binding——自定义的函数形参，通过自定义属性传递过来的值 存在binding.value 里面 */ Vue.directive('color',{ bind:function(el,binding){ console.log(binding.value.color); el.style.backgroundColor = binding.value.color; } }); var vm =new Vue({ el:'#app', data:{ msg:{ color:'blue' } } }) </script>通过自定义属性传递过来的值 存在binding.value 里面，所以msg那可以不用对象，可以直接字符串：msg:‘orange’
法二：注册局部指令
局部指令只能在当前组件里面使用当全局指令和局部指令同名时以局部指令为准 <input type="text" v-color='msg'> <input type="text" v-focus> <script type="text/javascript"> /* 自定义指令-局部指令 */ var vm = new Vue({ el: '#app', data: { msg: { color: 'red' } }, //局部指令，需要定义在 directives 的选项 directives: { color: { bind: function(el, binding){ el.style.backgroundColor = binding.value.color; } }, focus:{ inserted:function(el){ el.focus(); } } </script>例子：
<div id="app"> <div> <span>名：</span> <input type="text" v-model="firstName"> </div> <div> <span>姓：</span> <input type="text" v-model="lastName"> </div> <div>{{fullName}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ firstName:'', lastName:'', fullName:'', }, watch:{ firstName:function(val){ this.fullName = val +' '+this.lastName; }, lastName:function(val){ this.fullName = this.firstName + ' '+val; } } }) </script>使用计算属性也可以实现：
<div>{{allName}}</div> <script> computed:{ allName:function(){ return this.firstName+ ' '+this.lastName; } } </script>感觉： 监听器监听属性变化，给属性写监听事件，无需调用 计算属性是写好方法给你调用
用户名案例思路：
采用侦听器来监测用户名变化调用后台接口进行验证根据验证的结果调整提示信息 <div id="app"> <div> <span>用户名：</span> <input type="text" v-model.lazy="uName"> <span>{{tip}}</span> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ uName:'', tip:'', }, methods:{ checkName:function(name){ var that = this; setTimeout(function(){ if(name=='admin'){ that.tip='用户名已经存在，请更换一个'; }else{ that.tip='用户名可以使用'; } },2000) } }, watch:{ uName:function(val){ this.checkName(val); //可以调用方法嘚 this.tip='正在验证...'; } } }) </script>语法： Vue.filter(‘过滤器名称’，function(value){ 过滤器业务逻辑 }) 使用： < div > {{msg|upper}} < /div > < div > {{msg|upper|lower}} < /div >
2. 过滤器中传递参数
语法： Vue.filter(‘过滤器名称’，function(value,arg1,…){ 过滤器业务逻辑 })
第二个函数开始去接收传递来的参数，第一个value默认为过滤器传递来的参数（‘不是你放进去的‘）
使用： < div > {{ date | format(‘yyyy-MM-dd’) }} < /div >
案例：格式化日期 调用了一个别人写好的正则日期，不需要自己写了
mounted钩子函数： 这个函数一旦被触发，表示初始化已经完成了，初始化完成以后页面中的模板就已经存在了，就可以向里头填充数据。
插值表达式可以进行一些简单的计算 注意this！
Learning from vue 全家桶