Vue 两大核心：数据驱动(MVVM)和组件
Vue 两大核心：数据驱动(MVVM)和组件
Vue 两大核心：数据驱动(MVVM)和组件
1》创建vue实例
2》vue实例的4个常用选项
过滤器filters(小数过滤成整数)、计算属性computed(对数据进行计算)、方法methods(给元素挂载方法 v-on:click)、观察watch(观察数据变化)。
注：computed 和methods区别：
当要计算只会执行一次时，则用computed，因为计算的结果会保存在vue缓存里，只要计算的值没有发生变化，那么第二次调用时，则不会在次计算，而是到vue缓存里去取。反之，methods不算值有没有变化，只要调用计算方法，则每次都会执行。methods和watch方法是可以传参的，computed是不能传参的。
3》vue实例生命周期
4》vue在html中绑定数据
a.Mustache 语法:
什么叫Mustache语法，别被这高大上的叫法吓到了，其实就是双大括号{{ }}的写法。
b.绑定纯html：
有时候有一种这样的需求，我们的数据包含了一些html的标签代码，比如： name:"<strong>这是包含标签的数据</strong>"，用原来的双大括号{{ }}方式，就不能满足了，它会渲染成这样：<strong>这是包含标签的数据</strong>，你需要用vue提供的v-html指令：“<div id="app" v-html="name"></div>
”才会显示“这是包含标签的数据”。
c.绑定属性:
前面两个都是控制视图展示文本内容，有时候，html标签的属性也很重要，比如：<a>标签的href属性，<img/>标签的src属性等。Vue中如何将data中的数据绑定为这些属性的值呢？我们用v-bind指令:<a v-bind:href="link">hello官网</a>
注：v-bind有个缩写 <a :href="link">hello官网</a> 这样也行.
d.支持javascript表达式
<div id="app">{{name + 1}}</div>
<script>
let vm = new Vue({
el: "#app",
data: {
name: 2
}
})
</script>
name = 3;
5》必须掌握的10个指令
- v-text
指令用于更新标签包含的文本，它的作用跟双大括号的效果一样，<p v-text="msg"></p> 等于 <p>{{msg}}</p>。
<!-- v-text 指令 -->
<div id="app">
<p v-text="msg"></p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg : "123"
}
});
</script>
- v-html
指令用于要绑定的数据有html标签,如:msg:'<b>hello,vue</b>'， 而直接渲染会把标签显示出来，要用v-html=msg来渲染才会渲染hello,vue并用b标签包含。
<!-- v-html 指令-->
<div id="app" v-html="msg"></div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg : "<p>www</p>"
}
});
</script>
- v-show
指令用于控制元素的display css属性的,值为true和false来显示/隐藏。
<!-- v-show 指令 -->
<div id="app">
<p v-show="show" v-text="msg"></p>
<p v-show="hide" v-text="msg1"></p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
show : true,
hide : false,
msg : "123",
msg1 : "456"
}
});
</script>
v-if
指令用于控制元素是否需要被“渲染”出来，取值也是为true或false。
v-show 和 v-if 都能控制元素显示或者隐藏，这两个怎么区别使用呢？
记住一点：如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。v-else
if和else在编程语言一般都是结对出现的，在vue里面也不例外。它没有对应的值，但是要求前一个兄弟节点必须要使用 v-if 指令，也对，没有if，哪来的else。
<!-- v-if v-else 指令 -->
<div id="app">
<p v-if="hide">111</p>
<p v-else>222</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
hide : true
}
});
</script>
- v-for
有时候，我们的data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这个时候，我们要把数组的元素展示在视图上，就需要用到vue提供的 v-for 指令，来实现列表的渲染。
提醒：v-for指令除了可以迭代数组，还可以迭代对象和整数。
<!-- v-for 指令 -->
<div id="app">
<div v-for = "(itme,index) in list">{{ itme }}.{{ index }}</div>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
list : [1,2,3]
}
});
</script>
- v-bind
用于动态绑定DOM元素的属性，比较常见的比如：<a>标签的href属性，<img/>标签的src属性。
<!-- v-bind 指令 -->
<!-- <a id="app" v-bind:href = "link" v-text = "msg"></a> -->
<!-- 简写 v-bind去掉，只用:就行 v-bind:href = "link" 简写 :href = "link" -->
<a id="app" :href = "link" v-text = "msg"></a>
<script>
var vm = new Vue({
el : "#app",
data : {
link : "www.ha123.com",
msg : "好123"
}
});
</script>
- v-on
用于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数。
<!-- v-on 指令 -->
<div id="app">
<p v-on:click = "btnClick('Tom')" v-text = "msg"></p>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
msg : "事件v-on"
},
methods : {
btnClick(name){
if(this.msg == "123Tom"){
return this.msg = "事件v-on" + name;
}
// alert(1);
return this.msg = "123" + name
}
}
});
</script>
- v-model
这是一个最重要最常用的指令，一般用在表单输入，它帮助我们轻易地实现表单控件和数据的双向绑定，相对以前的手动更新DOM，简直就是开发者的福音。
<!-- v-model 指令 -->
<div id="app">
<input v-model = "msg" type="text">
<p>你好:{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
msg : ""
}
});
</script>
是不是比你手动更新DOM爽多了，是不是感受到了vue的MVVM带来的快感？
- v-once
它的特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。
<!-- v-once 指令 -->
<div id="app">
<input v-model = "msg" type="text">
<p v-once>你好:{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
msg : "这时设置值了，那怕通过v-model修改内容也不会渲染了"
}
});
</script>
