一、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>