一、Vue入门基础知识
1、Vue使用的基本操作
i. 先下载，引入vue.js
ii. Vue，实例化一个vue实例化对象（new Vue({})）
1. 新建一个vue实例化对象（Vue是一个构造函数）
2. 执行vue构造函数中每一句代码
3. 将新创建的vue实例化对象赋值给vue构造函数中的this
iii. 往vue实例化对象中传入一个对象（Vue实例化传入的对象里面的值也都为对象，以键值形式对存在，如data对象）
2、Vue的基础知识（应用：普通版的todolist（待办事项））
1) el: 节点挂载
限定Vue语法的作用范围
2) Data(需要渲染的数据，Vue 实例的数据对象)
a) data的类型可以为：Object | Function。
注：组件的定义只接受 function（因为函数有自己的作用域，每一个实例的data属性都是独立的）
b) data可以为：
1. 自定义数据
2. 通过ajax获取的后台数据
3. Data是一个函数
3）Vue语法，实现对(DOM)节点的渲染、删除、添加
a) 模板渲染{{ obj }}（data中的数据可以直接在html中显示,让js变量直接在html中使用）
b) v-for (列表渲染，使用for循环遍历数据生成节点，遍历对象和数组)，数据驱动视图
使用：1. 用 v-for 把一个数组对应为一组元素
v-for=”(item,index) in list”
list为源数据数组并且item是数组元素迭代的别名
index为当前项的索引
2、一个对象的 v-for
v-for="（value,key） in object"
object为data中定义的一个对象，value为对象的值，key为对象的键名
c) 条件渲染v-if、v-show（使用数据隐藏和显示节点）
1.v-if删除了节点
2.v-show隐藏了节点(使用display:none隐藏了节点)
d )删除节点，使用@click时间并在methods中定义delitem删除函数，并用v-bind绑定自定义属性，如：:data-id="item.id"
事件处理@click与回调函数methods （与v-bind结合使用，因为在进行操作的时候需要传入值）
1. 在节点上直接绑定click事件
2. 在methods属性中定义函数
3. methods中使用data中的数据必须使用this访问
4. this代表vue实例化对象
e) 添加节点,通过input的value值与data绑定
v-model与表单元素的value值的双向数据绑定（在表单控件或者组件上创建双向绑定,在节点上直接修改value属性）
双向数据绑定
1. 将表单中input的值value和data中值绑定起来
（data设置该数据的属性值title:"默认值"，input中绑定v-model="title"，添加按钮绑定@click="additem"）
2. data改变input[value]改变
data中的title的值改变，input中的value也会发生改变
3. Input[value]改变data改变
在input中输入值，点击添加按钮，data中的数据发生改变
f) 绑定属性（自定义属性）（绑定属性值）V-bind:href，data-id
1. 简写(：href)
2. v-bind：的缩写 : （冒号）
g) v-if删除了节点,页面审查不到
v-show隐藏了节点(使用display:none隐藏了节点),页面能够审查到
案例：简式计算机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="sum">
<input type="text" v-model="result">
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
opt:'+',
result:0
},
methods:{
sum:function(){
switch(this.opt){
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case '-':
this.result = this.n1 - this.n2;
break;
case '*':
this.result = this.n1 * this.n2;
break;
case '/':
this.result = this.n1 / this.n2;
break;
}
//eval() 计算某个字符串, 其返回值是通过计算这个string的得到的值
var str = this.n1 + this.opt +this.n2;
this.result = eval(str);
}
}
})
</script>
</body>
</html>