一、vue介绍
- vue类似于高级的模版引擎
vue的核心思想就是：数据驱动视图 MVVM
<div id="app">{{ message }}</div>var app = new Vue({el: ‘#app‘,data: {message: ‘Hello Vue!‘}})
- 每一个vue程序都是以 new Vue()开始的
- 每一项vue实例都接收一个选项对象来配置vue应用
选项的 el 属性用来高数 vue的启动入口节点
- 入口节点中所有的节点就可以使用vue的语法了,从某种意义上，vue就是一种高级的模版引擎
- 入口id不能挂载到html,body 元素，只能是一个普通的元素，所以一般我们的页面一开始就来一个 div#app
vue的模版对象数据通过data 选项来指定
以前我们使用
template(‘tpl‘,{f00: ‘bar‘ <%=foo %>},或者 {{ foo }})- 创建vue程序之后可以通过返回值拿到我们的vue实例，我们可以通过vue实例直接访问data中的成员
data中的数据是响应式的
- data中数据发生改变，则所有绑定了data数据的DOM都会发生改变，这就是所谓的"数据驱动视图"模式mvvm
我们可以通过实例选项的methods来配置实例方法
- 我们建议把数据放到 data 中
- 把方法放到 methods 选项中
- 在方法中我们可以通过 this 来访问 Vue 实例
vue操作自增示例
<!-- ????el: ‘#app‘ 这里节点是被 Vue 管理的模板 ??--> ?<div id="app"><h1>{{ num }}</h1><h2>{{ num }}</h2><p>{{ num + 1 }}</p><ul> ?<li>{{ num }}</li></ul><!-- 事件注册，绑定了 data 中的 increment 方法 --><button v-on:click="increment">点我让num+1</button> ?</div>var app = new Vue({ ?el: ‘#app‘, ?data: { // 模板数据对象，在模板中可以直接使用 ???foo: ‘bar‘, ???num: 10 ?}, ?methods: { ???increment: function () { ?????// 我们利用数据驱动视图的方式，改数据，从而改DOM ?????// 不建议直接使用实例的名称，因为一旦实例名称发生改变，这里都得修改 ?????// app.num++ ?????this.num++ ???} ?}})二、数据绑定
属性绑定
<h1>{{ message }}</h1><!-- {{}} 不能用于属性绑定 --><!-- 属性绑定使用 v-bind:属性名="数据成员" -->1.v-model 双向绑定 v-bind单向绑定 v-if 指令
指令名称：v-model
- 语法：v-model="绑定的成员"所谓的双向绑定只是针对表单控件的例如：文本框、单选框、复选框数据的改变会影响这个表单控件表单控件的改变会影响数据
- 使用场景
- 带有 value 的 input 都可以使用双向绑定
- 复选框使用双向绑定
+
<input type="checkbox" v-model="checkboxValue">复选框双向绑定需要给一个布尔值, 布尔值为真的时候，复选框被占用,布尔值为假的时候，复选框取消选中。当数据发生变化的时候会影响 checkbox，当 checkbox 发生变化的时候会影响数据
v-bind单向绑定
- v-bind 是单向的，只能被数据影响，但是不会影响数据
v-if 指令
- 给一个 Boolean 值，该指令会根据布尔值的真假来显示和隐藏
<div id="box" v-if="seen"></div>
todo-list案例
- 给一个 Boolean 值，该指令会根据布尔值的真假来显示和隐藏
???<style> ?????.done { ???????text-decoration: line-through; ???????color: #ccc; ?????} ???</style> ?</head> ?<body> ???<div id="app"> ?????<h1>Todo</h1> ?????<!-- {{ }} 中也可以调用方法，将方法的返回值渲染到这里 --> ?????<p> {{ calculate() }} of {{ array.length }} remaining <a href="#" v-on:click="clearAll">archive</a></p> ?????<ul> ???????<li v-for="item in array"> ???????<!-- ?因为 checkbox 是双向绑定，所以当 checkbox 发生变化的时候就把改变同步到数据中了 ???????????也就是 item.done 会随着 checkbox 的改变而改变--> ?????????<input type="checkbox" v-model="item.done"> ?????????<!-- ?class 比较特殊 ???????????如果是动态的 class 我们也是使用 v-bind 来绑定 ???????????但是我们需要给 class 一个对象 ???????????对象的 key 是类名，值是一个布尔值 ???????????当布尔值为真的时候，则作用这个类名 ???????????反之去除这个类名 ???????????同样的，也是响应式的，当数据发生改变的时候，class 绑定也会受影响 --> ?????????<span ?v-bind:class="{ done: item.done }">{{ item.title }}</span> ???????</li> ?????</ul> ?????<input type="text" placeholder="add new todo here" ??????v-model="inputText"> ?????<button v-on:click="addArray">add</button> ???</div> ???<script src="node_modules/vue/dist/vue.js"></script> ???<script> ???var array=[ ???????????{ ?????????????title: ‘吃饭‘, ?????????????done: true ???????????}, ???????????{ ?????????????title: ‘睡觉‘, ?????????????done: false ???????????}, ???????????{ ?????????????title: ‘写代码‘, ?????????????done: false ???????????}, ???????????{ ?????????????title: ‘吃饭‘, ?????????????done: true ???????????} ?????????] ???var app=new Vue({ ?????el:‘#app‘, ?????data: { ???????array, ???????inputText:‘‘, ?????}, ?????methods: { ???????addArray: function(){ ?????????this.array.push({title:this.inputText,done:false}) ?????????this.inputText=‘‘ //清空文本框 ???????}, ???????clearAll: function(){ ?????????//找到所有为done:true 的元素从数组中删除 ?????????var newArry=this.array.filter(function(item){ ???????????return !item.done ?????????}) ?????????this.array=newArry ???????}, ???????//计算剩余为执行的个数 返回done:fase的数组的lenght ???????calculate: function(){ ???????return this.array.filter(function(item){return !item.done}).length ???????????????} ?????} ???}) ???</script>