el:元素的挂载位置（值可以是CSS选择器或者DOM元素）
data 模型数据（值是一个对象）
methods:{} 方法区： 里面放的函数
computed:{}计算属性区：,计算属性定义在computed里面
watch:{} 监听器： 数据变化时执行异步或者开销较大的操作，数据一旦发生变化就通知监听器所绑定的方法
mounted: function(){}钩子函数: 该生命周期钩子函数被触发的时候，模版已经可以使用，
一般此事用于获取后台数据，然后把数据填充到模版
components:{} 局部组件 ，放到components:{}中的组建只有本类中可以使用
将数据填充到HTML标签中
插值表达式指出基本的计算操作
语法： {{}}
<body>
<div id="app">
<!-- 插值表达式 ，页面显示data里面msg里的值Hello Vue-->
<!-- 插值表达式还支持下面的一些基本计算和数据拼接-->
<div>{{msg}}</div>
<div>{{1+2}}</div>
<div>{{msg+‘----‘+123}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm= new Vue({
el:‘#app‘,
data:{
msg:‘Hello Vue‘
}
})
</script>
</body>
Push() 在数组尾部添加新元素。（尾部新增）
Pop() 取出数组尾部元素。(尾部取出)
Shift() 取出数组头部元素。(头部取出)
Unshift() 在数组头部添加新元素。(头部新增)
Splice() 向数组中添加，删除 元素，然后返回被删除的元素
Sort() 对数组的元素进行排序. 升序
Reverse() 对数组的元素进行排序. 降序
Filter(). 通过检查指定数组中符合条件的所有元素
Concat() 连接两个或更多的数组，并返回结果
Slice() 从已有的数组中返回选定的元素
Some(). 用于检测数组中的元素是否满足指定条件，如果满足，返回true，剩下的不会执行
Vue.set(vm.items,indexOfltem,newValue)
vm.$set(vm.items,indexOfltem,newValue) 和前面的小效果一样，只是写法不同
1?? 参数一表示要处理的数组名称
2?? 参数二表示要处理的数组索引
3?? 参数三表示要处理的数组的值
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
?
var vm = new Vue({
el: ‘#app‘,
data: {
list:["apple","orange","banana"]
},
})
//把数组中第二个数据改成茄子
vm.$set(vm.list,1,"茄子")
</script>
</body>
插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构
v-text 填充纯文本
1?? 相比插值表达式更加简洁
V-html 填充HTML片段
1?? 存在安全问题
2?? 本网站内部数据可以使用，来自第三方的数据不可以用
v-pre 填充原始信息
1?? 显示原始信息，跳过编译过程
<div>v-html="msg"</div> <!--和插值表达式一样页面显示的是data里msg的值-->
<div>v-text=‘msg‘</div><!--和插值表达式一样页面显示的是data里msg的值，不安全！-->
<div>v-pre="msg"</div><!--页面显示的是msg,而不是msg的值-->
如何理解响应式
1?? html5中的响应式（屏幕尺寸的变化导致样式的变化）
2?? 数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定
1?? 数据绑定： 将数据填充到标签中
2?? vue是双向绑定，用v-model绑定可以实现
v-once只编译一次
1?? 实现内容之后不再具有响应式功能
自定义指令用法
<input type="text" v-focus>
v-on指令用法
<input type=‘‘button" v-on:click=‘‘‘‘/>
V-on. 缩写： @
<input type=‘‘button" @click=‘‘‘‘/>
直接绑定函数名称，无参数，默认有一个事件对象
<button @click="say">Hello</button>
调用函数(有参数)
<button @click="say(123,333,$event)">Hello</button>
<body>
<div id="app">
<div>{{num}}</div>
<!-- 直接调用，默认会有事件函数-->
<button @click="handle">点击1</button>
<!-- 可以传参数，$event事件函数要手动添加，必须在最后一个-->
<button @click="handle(123,456,$event)">点击2</button>
?
</div>
<script src="js/vue.js"></script>
<script>
var vm= new Vue({
el:‘#app‘,
data:{
num:0,
},
methods:{
/*
事件绑定-参数传递
1。如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
*2。如果时间绑定函数调用，（传递参数），那么事件对象必须在最后一个
3。$event事件函数是固定写法
*/
handle:function (p,k,event) {
//这里的参数就是获取到的参数123，和456
console.log(p,k)
//$event是事件对象，
//$event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素
console.log(event.target)
?
// 这里的this是Vue的实例对象
this.num++;
}
}
})
</script>
</body>
.stop阻止冒泡
.prevent阻止默认行为
.enter 回车键
<input v-on :keyup.enter="submit">
.delete 删除键
<input v-on :keyup.delete="handle">
实现逻辑
1.先绑定input a，input b. ,input 结果
2.data里面定义a、b、结果三个熟悉
然后点击按钮触发事件，在方法里写相加的逻辑
<body>
<div id="app">
<h1>简易计算机</h1>
<div>
<span>数值A：</span>
<span><!--绑定a-->
<input type="text" v-model="a">
</span>
</div>
<div>
<span>数值B：</span>
<span><!--绑定b-->
<input type="text" v-model="b">
</span>
</div>
<div>
<button @click="handel">计算</button>
</div>
<div>
<span>计算结果</span>
<!--绑定result-->
<span v-text="result"></span>
</div>
</div>
<script src="js/vue.js"></script>
<script >
var vm= new Vue({
el:‘#app‘,
data:{
a:‘‘,
b:‘‘,
result:‘‘
},
methods:{
handel:function () {
//实现计算逻辑
// parseInt(this.a)转换成int ,不转换的话是就会拼接
this.result= parseInt(this.a)+ parseInt(this.b);
}
?
}
})
</script>
</body>
v-bind指令用法
<a v-bind:href="url"></a>
缩写形式
<a :href="url"></a>
<body>
<div id="app">
<!-- v-bind是属性绑定 ，简写成 ：-->
<!-- 现在就是绑定了data里面的url的地址-->
<a :href="url">跳转</a>
<button @click="handle">切换</button>
</div>
<script src="js/vue.js"></script>
<script >
var vm= new Vue({
el:‘#app‘,
data:{
url:‘http://www.baidu.com‘
},
methods:{
handle:function () {
//修改URL的地址
this.url=‘http://itcast.cn‘;
}
?
}
})
</script>
</body>
v-model其实就是v-bind和v-on组合起来的
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
对象语法
<div v-bind:class="{active: isActive}"></div>
数组语法
<div v-bind:class="{a,b}"></div>
对象语法
<body>
<div id="app">
<!-- //内联样式Style-->
<div v-bind:style="{border:borderStyle1,width:widthStyle,height:heightStyle}"></div>
<!-- //内联绑定对象-->
<div v-bind:style="objStyles"></div>
?
<button v-on:click="handle">切换</button>
</div>
<script src="js/vue.js"></script>
<script >
var vm= new Vue({
el:‘#app‘,
data:{
borderStyle1:"1px solid blue",
widthStyle:"100px",
heightStyle:"200px",
?
objStyles:{ /*对象*/
border:"1px solid green",
width:"200px",
height:"100px"
}
},
methods:{
handle:function () {
//点击事件之后可以把高度切换成100px
this.heightStyle=‘100px‘;
//点击事件之后可以把对象里面的宽度切换成30px
this.objStyles.width="30px";
}
}
})
</script>
</body>
v-if
v-else
V-else-if
V-show
v-for遍历数组
<li v-for="item in list">{{item}}</li>
表单操作
计算属性
过滤器
监听器
生命周期
Input 单行文本
textarea 多行文本
select 下拉多选
Radio 单选框
Checkbox 多选框
<body>
<div id="app">
<form>
<!-- input单行表单-->
<div>
<span>姓名：</span>
<span>
<!-- v-model默认是双向绑定-->
<input type="text" v-model="name1">
</span>
</div>
<!-- 单选按钮-->
<div>
<span>性别</span>
<span>
<!-- v-model绑定-->
<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="female"></label>
</span>
</div>
<!-- 多选按钮 -->
<div>
<span>爱好</span>
<input type="checkbox" id="ball" value="1" v-model="aihao">
<label for="ball">篮球</label>
<input type="checkbox" id="pai" value="2" v-model="aihao">
<label for="pai">排球</label>
<input type="checkbox" id="pingpang" value="3" v-model="aihao">
<label for="pingpang">乒乓球</label>
</div>
<!-- 下拉框 -->
<div>
<span>职业</span>
<select v-model="zhiye">
<option value="0">请选择职业</option>
<option value="1">教师</option>
<option value="2">程序员</option>
<option value="3"