条件指令
知识回顾：
挂载点成员el尽量使用id，因为一个实例永远只配对一个标签，不能用‘*’通配选择器，第一个找的就是html，html不能作为挂载点，我们尽量从body下面的结构，自己写的标签用id作业挂载点，Vue实例本质上实在操作虚拟Dom,虚拟Dom操作完映射到真实Dom上面去，会把真实的Dom替换掉，等于把body替换掉，所以不能让挂载点放在body里
这里面关键字变量true和false是可以被解析的
这里面可以做运算也可以拼接，可以做写js代码，但是不介意在插值表达式这么做，只能做简单的操作
如果改为普通的变量就会报没有定义的错，需要在data里面定义
这里111,222，都是true第一个成立了就不会继续往下看了，如果是===就是假
v-esle会默认与v-if等有条件的分支绑定
v-else-if必须有条件才和有条件的v-if分支绑定
<ul> <li @click="action('a')">a</li> <li @click="action('b')">b</li> <li @click="action('c')">c</li> </ul> <ul> <li v-show="flag == 'a'">aaa</li> <li v-show="flag == 'b'">bbb</li> <li v-show="flag == 'c'">ccc</li> </ul>
通过控制点击标签控制页面变化小实例
按上面a下面会变成aaa
循环指令
前提是数组里面一定要有值，如果要显示出索引需要给num加括号逗号索引
字典for循环
值是无序的，key是有序的，如果不知道括号里面再加东西不会报错
Vue中的留言板
注意这里的函数名del不能是关键字参数delete
如果是pop的话默认删的是最后一个
需要用splice删除，splice默认有三个参数
<body> <div id="app"> <p> <input type="text" v-model="val"> <button @click="add(val)">评论</button></p> <ul> <li v-for="(info,i) in infos">{{ info }} <span @click="del(i)">x</span></li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { infos:[], val:'' }, methods:{ del:function (i) { this.infos.splice(i,1) }, add:function () { let val = this.val; if (this.val){ this.infos.splice(0,0,val); val='' } } } }) </script>
v-model就能拿到用户输入的文本，然后再加入评论的函数名加个val参数，然后再add方法里面做判断，如果填的有值还给他加进infos数组里面for循环到页面上，然后并且清空val的值
