Vue
Vue
定义
可以独立完成前后端分离式web项目的JavaScript框架
优点
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
使用
开发版本：[vue.js](https://vuejs.org/js/vue.js)
生产版本：[vue.min.js](https://vuejs.org/js/vue.min.js)
<script src="js/vue.min.js"></script>
实例
el: 实例 挂踩点,与实例一一对应
data: 方法 插件表达式中的变量提供数据，data中的数据可以通过Vue实例直接或间接访问
methods: 数据 为事件绑定指令 提供实现体
computed：计算 一个变量依赖于多个变量，其中一个变量变化，其也会变化，有返回值
watch: 监听 多个变量依赖于一个变量,一个变量变化，其也会变化，有返回值
delimiters: 分隔符
new Vue({
el: '#app'
data: {
msg: '数据',
}
methods: {
pClick () {
// 点击测试
},
pOver () {
// 悬浮测试
}
}
computed: {
c: function() {
// this代表该vue实例
return this.a + this.b;
}
}
watch: {
ab: function() {
// 逻辑根据需求而定
this.a = this.ab[0];
this.b = this.ab[1];
}
}
delimiters: ['${', '}']
})
Vue 指令
1、插值表达式 {{ }}
<p>{{ msg }}</p>
2、斗篷指令 v-cloak 使用vue时失效，避免两次刷新闪烁
<style type="text/css">
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ msg }}
</div>
3、属性指令 v-bind： 简写为：
<!-- 给自定义全局属性绑定变量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式绑定全局属性 -->
<p v-bind:title="'abc'"></p>
<!-- 单类名绑定 -->
<p v-bind:class="c1"></p>
<!-- 多类名绑定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 类名状态绑定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多类名状态绑定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p> 为true时起作用，为false时不起作用
样式绑定
<div :style="div_style"></div>
4、事件指令 v-on 简写 @
<!-- 不传参 事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>
5、表单指令 v-model针对于表单(form)元素
单选框 以name进行分组，同组中只能发生单选，v-model存储的值为单选框的value值
复选框 v-model为[],存储的值为存储值多复选框value的数组
单一复选框
6、条件指令 v-if v-else-if v-else | is-show
1.条件渲染的值为true|false
2.true 代表标签显示方式渲染
3.false v-if不渲染到页面,直接没了，保护代码,v-show以display:none渲染页面
7、循环指令
<li v-for="s in arr">{{ s }}</li> 循环 arr 中的 值
<li v-for="(s, i) in arr" :key="s" b="b">第{{ i }}个：{{ s }}</li> key属性是vue的属性，表示为该标签在内存中建立缓存的依据 (i 为索引)
当循环的为字典时 person={ }
<li v-for="v in person">{{ v }}</li> 打印 value
<li v-for="(v, k) in person">{{ k }}:{{ v }}</li> 打印 k: v
<li v-for="(v, k, i) in person">{{ k }}:{{ v }}:{{ i }}</li> 打印 k: v:index
案例
todolist 案例
评论的增加与删除
