本文详细介绍了Vue.js的核心特性，包括数据驱动视图、模板语法、过滤器、指令（如v-if/v-show、v-model、v-for）、事件处理、自定义指令和钩子函数，以及组件系统的概念和使用。强调了v-if与v-show的差异，以及如何通过v-model实现双向数据绑定。此外，还提到了Vue实例的生命周期和组件的通信方式。
1.数据驱动视图 ，一切都是组件
实例var vm=new Vue({})
模板
el template,有template的话优先加载template
文本插值{{}}（动态）{{*}}（固定）
过滤
{{'welcome'|uppercase}}
{{'WELCOME'|lowercase}}
{{'WELCOME'|lowercase|capitalize}}（首字母大写）
{{12|currency}}（将数字转化为货币）
{{12|currency '￥'}}
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
例如，v-bind 指令可以用于响应式地更新 HTML 特性：
<a v-bind:href=“url”>…
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent=“onSubmit”>…
缩写：
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
第一个程序 点击按钮，div消失（v-show控制dom的显示隐藏（display:none/block））
也可以用v-if实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="vue.js"></script>
<script>
window.function(){
var vm=new Vue({
el:'#box',
data:{ //数据
a:true
},
methods:{
showcont:function(){
this.a=!this.a;}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click='showcont'>//v-on:click事件
<div style="width:100px; height:100px; background: red" v-show="a"> //v-show显示隐藏
</div>
</div>
</body>
</html>
vue.js实例生命周期
v-model
对表单元素双向数据绑定
原理：
v-model 通过两步实现了数据反向传递
第一步，绑定了DOM标签的input事件(比如叫tapInput())
第二步，当用户进行输入时候，触发tapInput()函数，tapInput()函数内部读取此DOM标签的Value值，赋值给vue实例
通过以上两步，v-model语法糖实现了vue数据的反向传输
<script src="vue.js"></script>
<script>
window.function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue'
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg">
<br>
{{msg}}
</div>
</body>
</html>
v-for
“value in arr” track-by="$index"(v-for不添加重复元素。如果添加重复元素，track-by="$index")
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
你也可以提供第二个的参数为键名：
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
第三个参数为索引：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
不推荐同时使用 v-if 和 v-for。更多细节可查阅风格指南。
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：
- {{ todo }}
- 上面的代码只传递了未完成的 todos。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 )上。如：
- {{ todo }}
No todos left!
## v-bind 绑定元素属性 ``` data:{ url:'https://www.baidu.com/img/bd_logo1.png', w:'200px', t:'这是一张美丽的图片' },```
class例子 style例子
<style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.function(){ new Vue({ el:'#box', data:{ y:{ color:'red', backgroundColor:'gray' } red:'red', blue:'blue' a:true b:false json:{ red:true, blue:true } c:{color:'red'} l:{backgroundColor:'blue'} }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :class="[red,blue]">文字...</strong> <strong :class="{red:false,blue:false}">文字...</strong>//白底黑字 <strong :class="{red:a,blue:b}">文字...</strong> <strong :class="json">文字...</strong> <strong :style="{color:'red'}">文字...</strong> <strong :style="[c]">文字...</strong> <strong :style="[c,l]">文字...</strong> <strong :style="y">文字...</strong> </div> </div> </body>v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
自定义指令和钩子函数
自定义全局指令Vue.directive( ’ 自定义指令名 ’ , { } )
自定义私有指令跟自定义过滤器的套路是一样的，在构造函数里定义directives
参数一是指令的名字，注意定义的时候指令前不需要加 v- 前缀，但调用的时候必须加上这个前缀
参数二是一个对象，在这对象身上有一些指令相关的函数，这些函数可以在特定阶段执行相关的操作，叫钩子函数
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。事件
v-on:click单击
v-on:dblclick双击<script> window.function(){ new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'], json:{a:'apple',b:'banana',c:'orange'} }, methods:{ add:function(){ this.arr.push('tomato'); } } }); }; </script> </head> <body> <div id="box"> <input type="button" value="按钮" v-on:click="add()"> <br> <ul> <li v-for="value in arr" track-by="$index"> {{value}} {{*value}}//不会改变 </li> </ul> </div> </body>组件系统
是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：// 定义名为 todo-item 的新组件 Vue.component('todo-item', { template: '<li>这是个待办项</li>' })但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：
Vue.component('todo-item', { // todo-item 组件现在接受一个 // "prop"，类似于一个自定义特性。 // 这个 prop 名为 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>' })每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档 中浏览完整的选项列表。只有当实例被创建时 data 中存在的属性才是响应式的。这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) <div id="app"> <p>{{ foo }}</p> <!-- 这里的 `foo` 不会更新！ --> <button v-on:click="foo = 'baz'">Change it</button> </div>除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：
var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true// $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a)
比如 created 钩子可以用来在一个实例被创建之后执行代码：new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) // => "a is: 1"也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
扫一扫
9215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
