1.挂载点、模板、实例
-
挂载点：指 Vue 实例里 el 属性对应所绑定的 dom 节点
-
模板：指挂载点内部的内容和 Vue 实例里 template 属性里的内容 ,template：模板
-
实例：在实例里面指定一个挂载点，把模板写上，内容就会呈现在挂载点之中
2.数据、事件、方法
- data: {}可以指定变量，存放数据
- v-text和v-html的异同点：
- 相同点：在标签指定可以使用Vue实例里的数据{{msg}}
- 不同点：类型原生dom，text转义所有内容，包括标签，html可以识别标签
- v-on:click=@click ，简写，以后用@
- {{number}}：此为插值表达式
- 在实例的“methods:{}”里定义函数方法“函数名称: function(){}”。
比如，
methods: {
handleClick:function(）{}
}
3.属性绑定和双向数据绑定
-
v-bind：单项数据绑定
-
v-model：双向数据绑定
-
v-model:提供双向绑定
-
指令v-on缩写是 " @ "
-
指令v-bind缩写是 " : "
<body>
<!-- v-bind:简写为: -->
<!--<div id="root" :title= "title">{{msg}}</div>-->
<div id="root" :title="title">
<input v-model="content">
<!--双向绑定 输入框的数据变化，data里的content变量的数据也跟着变化-->
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "hello world!",
title: "This is a hello world.",
content: "This is a content"
}
})
</script>
</body>
4.计算属性和监听器
- computed 可以计算属性值，写一个函数返回
computed: {
fullName: function(){
return this.firstName+" "+this.lastName;
}
}
- watch监听器，监听属性，若发生变化，则执行函数
watch: {
fullName : function(){
this.count++;
}
}
5.v-if、v-show、v-for指令
- v-if：当属性是false时,标签直接从dom中删除
<!--点击按钮，h1的元素在html中消失-->
<h1 v-if ="show">{{msg}}</h1>
- v-show：当属性为false时，标签的样式为display:none
<!--点击按钮，h1的标签样式增加display:none-->
h1 v-show ="show">{{msg}}</h1>
- v-for：循环显示数据，在使用v-for的时候最好添加一个key的属性，这样可以提高页面渲染速度，且key值要保持在此次v-for中保持唯一。
<ul>
<!--list数组中的元素循环指定为li标签的内容，index表示下标，item为每一项的值-->
<li v-for = "(item,index) of list" :key="index">{{item}}</li>
</ul>
区别v-if和v-show:
- 当他们对应的数据项的值为false时，“v-if”会使他所在的标签在DOM中移除，“v-show”会使他所在标签添加一个“display:none;”隐藏的属性。
- v-show 不会像 v-if 每次销毁再重新创建，v-show 性能相对v-if 高一些
- 如果标签显示的频率不是那么大，只需要做一次显示或者隐藏，这时候用 v-if 是一个更好的选择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue实例</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="ss">
<h1 v-show="show">{{msg}}</h1>
<button @click="handleClick">Toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#ss",
data: {
msg: "hello world!",
show: true,
list: [1, 2, 3]
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
