vue是什么
1.构建用户界面
- 用vue给页面中注入数据
2.框架
- 框架是一套现有的解决方案,程序员遵循框架的规范,去编写业务代码
- 包含vue指令,组件(对ui结构的复用),路由,vueX,vue组件库
vue的两个特性
1.数据驱动视图
- 数据的更新会驱动视图自动更新(只需要处理数据,就能够把视图自动渲染出来)
2.双向数据绑定
在网页中,Ajax负责提交数据,form表单负责采集数据
- js的变化,会自动渲染到界面上
- 页面上的数据发生变化,会被vue自动获取,并且更新到js数据中
注意:数据驱动视图和双向数据绑定的基本原理是MVVM(model:数据源 view:视图,DOM结构,vue中el控制的区域 vm:view-model,vue的实例)
vue指令
1. 内容渲染指令:
- v-text:会覆盖原有的元素(不推荐)
- {{}}:插值表达式,不会覆盖原有的内容,作为内容的占位符
- v-html:可以把带有标签的字符串,渲染到页面
2.属性绑定指令
v-bind是属性绑定指令
注意,插值表达式不能用在属性节点中,只能存在内容节点中。所以需要属性指令。
- 在vue中,可以使用指令为元素动态绑定值。
- 简写是英文':'
例如: <button v-bind:click="onClick"></button> <button :click="onClick"></button>
3.在使用v-bind时候,元素可以使用字符串拼接,例如:
<p :titile="'box'+index"></p>
3.事件绑定指令
- v-on:简写为@
- 语法格式
<div id="app">
<p>count:{{count}}</p>
<button @:click="addCount">+1</button>
</div>
const vm = new Vue({
el: "#app",
data: {
count:0
}
methods: {
addCount () {
this.count++;
}
}
})
- $event:如果默认的事件参数被覆盖,则可以手动传递一个$event原生事件对象
如果函数没有参数,默认会给一个事件参数,且属性中不需要加上括号。
4. 事件修饰符
①prevent事件
在事件中可以使用preventDefault()阻止默认事件的传递
addCount (e) {
e.preventDefault();
console.log(e);
}
在属性中可以使用prevent阻止
<button v-on:click.prevent="addCount">+1</button>
②stop事件
在事件中可以使用stopPropagation()阻止冒泡
在属性中可以使用stop阻止,语法同上。
5. 按键修饰符
@keyup:esc :按下esc的时候触发事件
@keyup:enter :按下enter的时候触发事件
6. 双向绑定指令:
v-model:在不操作DOM的时候,快速获取表单数据。
v-model在表单元素中才能使用,因为该指令只有在用户能操作数据的时候才有意义。
能使用的元素有:input, select, textarea
v-bind是单向绑定,数据源改变会重新渲染界面,页面数据更改不会影响数据源
7. 双向绑定指令修饰符
v-model.number=‘’ --输入的文本只能是数字
v-model.trim='' --输入数据自动清除首尾空格
v-model.lazy=‘’ --失去焦点的时候才会更新数据源
8. 条件渲染指令
开发者按需展示和隐藏元素
v-if: 根据条件,动态移除和创建元素
缺点:消耗性能
v-show: 根据条件,改变disiplay的值进行隐藏和显示
缺点:在后期不需要展示该元素的时候,用v-if更好
在开发中,不考虑性能问题推荐用v-if!!!!!
v-else-if和v-else必须和v-if配套使用,不然不会被识别
9. v-for循环
<li v-for =“item in list" >{{item.username}</li>
<li v-for =“(item, index) in list" >{{item.username}</li>
index不使用的时候可以隐藏。
①使用v-for的时候必须要添加key属性。(提高性能,防止列表状态紊乱)。
②key属性必须使用字符串或者数字。
③key值不能重复,因此不能使用index作为key值,因为index不会和数据进行绑定,推荐使用id绑定。