- 1.1 对于Vue是一套渐进式框架的理解
[主张最少
,Vue可以根据开发者的实际需求来不断渐进,而不是一口气全部用上]
[搭积木,我们可以根据需求,利用社区良好的生态,借助已有的工具和库搭建我们的项目,用最小、最快的成本一步步搭建。]
先看到核心的部分(最小集),或者说是 Vue 这个名字的“初衷”: View,然后在此基础上进行开发者自身的 DIY 扩展,也就是按需采用。这个过程是随着开发者的需求逐步变化增长的,由简单到复杂的应用场景都可以涵盖到
- 1.2 vue几种常用的指令
-
1.插入文本: v-text
相当于元素的innerText属性,必须是双标签 -
2.插入HMTL: v-html
相当于元素的innerHTML属性 -
3.循环: v-for
如果names是数组,还有index属性,如v-for="(item,index) in names" ;
如果names是对象,还有value,key属性,如v-for="(value,key,index) in names"; -
4.双向绑定:v-model
一般用在表达输入,很轻松的实现表单控件和数据的双向绑定。只能给具备value属性的元素进行双向数据绑定。 -
5,6,7.条件渲染:v-show,v-if ,v-else
区别:
v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
v-show 就简单得多,是否隐藏元素——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
v-if直接从代码中删除了,v-show只是通过display来切换状态 -
8.属性绑定:v-bind
这个指令用于响应地更新 HTML 特性,比如绑定某个class元素或元素的style样式。
v-bind:属性名="常量 || 变量名",简写形式——:属性名="常量 || 变量名"
//可以简写成
//如果要赋值常量,需要给常量用单引号包起来,如
//这样的方式然后绑定动态属性比较常见的有a标签的href,img标签的src。
-
9.绑定事件:v-on
用于监听指定元素的DOM事件,比如点击事件。
v-on:click = "方法名 || 直接改变 vue 内部变量",简写形式——@click = "方法名 || 直接改变 vue 内部变量" -
10.v-once
只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能,也可以加给点击事件,默认只能点击一次
- 1.3 vue常用的修饰符
-
v-model
的修饰符
v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 和
.lazy 延迟了同步更新属性值的时机
var vm =new Vue({
el:"#app",
data: { input_lazy:"" }
});
//在页面中的 input 的元素上添加指令
v-model.lazy
当在文本框输入内容,并且光标焦点没有离开文本框时,属性值没有实时发生变化
而当焦点离开文本框时,属性值发生了变化并与文本框内容保持一致。
从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。
.number 该修饰符用来将输入内容自动转换成数值。
var vm =new Vue({
el:"#app",
data: {input_number:""}
});
v-model.number
当开始输入数字时,属性值将实时更新成Number类型的数值。数字后输入其他非数字的字符,属性值将不再变化。
而当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值,所以属性值将实时更新成相同的字符串。即使后面输入数字,也将被视作字符串。
.trim 该修饰符用来自动过滤字符串前后的空字符。
v-model.trim
//Vue会自动过滤掉前后的多个空格,最终属性值是前后没有空字符的字符串。
-
v-on
的修饰符
绑定的事件修饰符可以改变事件的触发方式。
.stop 该修饰符将阻止事件向上冒泡。 同理于调用 event.stopPropagation() 方法
var vm =new Vue({el:"#app",
methods: {
div_click:function() {
console.log("div click...");
},
stop_click: function() {
console.log("stop_click...");
}
}
});
//将上面两个方法绑定到一组具有父子关系的元素上
div class="row">
v-on.stop