一. 第一个VUE程序
1.1 引入js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1.2 给dom元素定义id
<div id="app">
{{msg}}
</div>
注意：一定要有根元素包含
1.3 vue代码编写
new Vue({
el: "#app",
data() {
return {
msg: "hello world"
}
}
});
二. 基本指令
- v-text：用于操作纯文本，它会代替显示对应的数据对象上的值，可以简写为{{}}，即插值表达式。
- v-html：将内容以html的形式呈现在页面
- v-model：双向数据绑定
- v-if：值如果为true则显示标签，如果为false会移除标签
- v-else-if：和v-if配合使用
- v-else：和v-if配合使用
- v-for：循环遍历。语法形式为v-for="item in list"
- v-show：值为true则显示信息，如果为false则隐藏标签（相当于display="none"，而v-if是将标签移除）
- v-on:click：点击事件，可以简写为@click
- v-bind：将值绑定到标签的自定义属性上，形式为v-bind:title="mytitle"，可以简写为 :title="mytitle"
<body>
<div id="app">
<p v-text="name"></p>
<p v-text="htmlText"></p>
<p v-html="htmlText"></p>
<p v-if="age > 40">
中年
</p>
<p v-else>
青年
</p>
<ul>
<li v-for="user in users">
{{user.age}} -- {{user.name}}
</li>
</ul>
<!-- v-show和v-if区别，v-show不匹配只是加上display=none样式，而v-if则是整个done树节点不会加载-->
<div v-show="age > 10">
v-show: 年龄大于20岁
</div>
<div v-if=" age > 30">
v-if：年龄大于30岁
</div>
<!-- v-on可以直接使用 @符号来代替 -->
<button @click="getAge">点击</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
name: '张三',
htmlText: '<a href="http://www.baidu.com">百度</a>',
age: 20,
users: [
{age: 10, name: 'zhangsan'},
{age: 20, name: 'lisi'},
{age: 30, name: 'wangwu'}
]
}
},
method: {
getAge(){
// 如果method中要使用 vue data中的数据，都需要带上this
alert(this.age);
}
}
})
</script>
三. 计算属性与监听器
3.1 计算属性
计算属性是用来存储数据的，而且数据可以进行逻辑操作，是基于其依赖的进行更新，只有在相关依赖发生变化的时候才会更新，计算属性是缓存的，只有相关依赖不发生变化，多次访问属性值是之前计算得到的值，并不会多次执行。计算属性的属性名不需要纳入Vue的数据对象中。
3.2 监听器
所谓的监听器就是可以通过watch的方式观察某个属性的变化，然后做出相应的处理。
3.3 案例
<div id="app">
FirstName: <input type="text" v-model="firstName"> <br>
LastName: <input type="text" v-model="lastName"> <br>
FullName(单向数据绑定): <input type="text" v-model="fullName1"> <br>
FullName(单向数据绑定): <input type="text" v-model="fullName2"> <br>
FulltName(双向数据绑定): <input type="text" v-model="fullName3"> <br>
</div>
对应的js代码如下：
<script>
new Vue({
el: '#app',
data(){
return{
firstName: '',
lastName: '',
fullName2: '',
}
},
//计算属性
computed:{
fullName1: function() {
let firstName = this.firstName;
let lastName = this.lastName;
return firstName + ' ' + lastName;
},
fullName3: {
// 中只要牵扯到属性发生变化，该方法就会得到触发。
get() {
let firstName = this.firstName;
let lastName = this.lastName;
return firstName + ' ' + lastName;
},
// fullName3发生变化，该方法会得到触发
set(value) {
let names = value.split(/\s+/);
this.firstName = names[0];
this.lastName = names[1];
}
}
},
//侦听器
watch: {
firstName: function(newVal, oldVal) {
//console.log(newVal, oldVal);
this.fullName2 = newVal + ' ' + this.lastName;
},
lastName: function(newVal, oldVal) {
this.fullName2 = this.firstName + ' ' + newVal;
}
}
})
</script>
注意：methods、computed和watch的区别
- 计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。
- 侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。
1. computed和methods
- 共同点：computed能实现的methods也能实习那
- 不同点：computed是基于它的依赖进行缓存的。computed只有在它的相关依赖发生变化才会重新计算求值。
而只要它的相关依赖没有发生变化，多次访问会立即返回之前的计算结果，而不必再次执行计算。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。也就是说当我们不希望有缓存时，就用方法替代。
2. watch和computed
- 共同点：都是以Vue的依赖追踪机制为基础的，都是希望在依赖数据发生变化的时候，
被依赖的数据根据预先定义好的函数，发生“自动”变化。
- 不同点：
1. watch擅长处理的场景：一个数据影响多个数据；computed擅长处理的场景：一个数据受多个数据影响。
2. 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。
演示：当一个值改变了需要1s之后显示到页面中，通过watch可以轻松的实现
<div id="app">
<div>
{{msg}}
</div>
<div>
{{newValue}}
</div>
<button @click="handleClick">点击</button>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello',
newValue: ''
},
methods: {
handleClick () {
this.msg = 'hello1'
}
},
watch: {
msg (newValue) {
setTimeout(() => {
this.newValue = newValue
}, 1000);
}
}
})
</script>
使用计算属性无法在里面写一些异步逻辑
<div id="app">
<div>
{{msg}}
</div>
<div>
{{newValue}}
</div>
<button @click="handleClick">点击</button>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello',
temp: ''
},
computed: {
newValue () {
if (this.temp) {
// 不能写异步
// setTimeout(() => {
// return msg
// }, 1000);
return this.msg
} else {
return this.temp
}
}
},
methods: {
handleClick () {
this.msg = 'hello1'
this.temp = 'hello1'
}
}
})
</script>
