Vue学习笔记（2）vue指令

live-server使用

npm install live-server -g    //全局安装live-server

live-server    //启动

v-if&v-show

v-if和v-show都是vue的内布指令

v-if用来判断是否加载html的dom

v-show只是调整css中display的属性，dom会加载，是否显示由css控制

v-show和v-if的区别

v-show：调整css display属性，可以使客户端操作更加流畅

v-if：判断是否加载，可以减轻服务器压力，在需要时加载。

v-for

v-for指令是循环渲染一组data中的数据，v-for指令需要以item in items形式的特殊语法

items是源数据数组 item是数组元素迭代的别名。

    模板写法

    <li v-for="item in items">

        {{item}}

    </li>

    js写法

    var app=new Vue({

     el:'#app',

     data:{

         items:[20,23,18,65,32,19,54,56,41]

     }

    })

需要注意的是 你需要循环哪个标签，就把v-for写在那个标签上面

v-text&v-html

{{xxx}}这种写法是有弊端的 当我们网速很慢或者JavaScript报错时，会暴露{{xxx}}，like this：

这时候 用v-text就可以解决这个问题了；

如果在js中输入的有标签 like this：

这时候 v-text是输出不出来的 此时需要用v-html

需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用

v-on绑定事件

v-on指令用来监听dom事件来触发一些JavaScript代码。

缩写：v-on：click="clickDom"和@click="clickDom"一样

v-model

v-model修饰符：

多选按钮绑定一个值

多选绑定一个数组

单选按钮数据绑定

v-bind指令

v-bind是处理html中的标签属性的 可以给img的src进行动态复制 like this：

@src="bindSrc"为v-bind的缩写

实际应用如下

其他内部指令v-pre v-cloak v-once

1.v-pre在模板中跳过vue 的编译，直接输出原始值 like this：

输出值为：

2.v-cloak指令在vue渲染整个dom后才进行显示，他必须和css样式一起使用

3.v-once指令在第一次dom时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程，不在渲染