1. 双向数据绑定
input框中的文字可以即时显示在<h1>标签中：
<div id="app">
<input type="text" :value="str" @input="change">
<h1>{{str}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
str: '我爱Vue'
},
methods: {
change: function (e) {
let event = e || event;
this.str = event.target.value
}
}
})
</script>
复制代码
v-model就类似于上面的写法，是一种语法糖，来实现双向数据绑定。\
@keyup后面可以接修饰符 .enter .keyCode值 ， 当按下回车键时，alert 出 input框中的文字：
<div id="app">
<input type="text" v-model="str" @keyup.13="keyFn">
<h1>{{str}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
str: '我爱Vue'
},
methods: {
keyFn(e) {
alert(this.str)
}
}
})
</script>
复制代码
2. v-if 与 v-show 的区别
<h1 v-if="false">pineapple</h1>
v-if 的元素只会在指令的表达式返回 true 时被渲染。如返回 false ，在DOM文档中找不到对应的元素，变成了注释。
<span v-show="false">apple</span>
v-show 的元素始终会被渲染并保留在 DOM 中。 只是简单地基于 CSS display进行切换。\
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变（例如页面一开始加载的时候进行判断显示），则使用 v-if 较好。
在实际的开发过程中，使用v-if比较多。\
3. v-if 与 v-for 一起使用
不推荐同时使用 v-if 和 v-for。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
<div id="app">
<ul>
<!-- <li v-for="(item,index) in list" v-if="item>1"> -->
//不推荐上面的写法
<li v-for="(item,index) in list">
<span v-if="item>1">
{{item}}
</span>
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
list: [1, 2, 3]
}
})
</script>
复制代码
4. 监听器 watch
监听器watch， 只要data中的值被改变了就会被触发。
基本数据类型可以使用简写的方式。
引用数据类型使用简写的方式无效，需改用对象的方式，加deep:true深度监听。
<div id="app">
<h1>￥{{price}}</h1>
<button @click="up">涨价10元</button>
<h1>￥{{car.price}}w</h1>
<button @click="carUp">涨价1w</button>
<h2>您的爱车相比原价涨了{{car.expensive}}w</h2>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
price: 100,
car: {
price: 100,
price0: 100,
expensive: 0
}
},
watch: {
/*属性需要和data中的属性相对应 */
/* 第一个参数a表示最新的值 第二个参数b表示之前的值 */
price: function (a, b) {
console.log('相比原价贵了' + (a - 100) + '元');
},
car: {
// 进入页面会立即执行监听器里面的handler方法
immediate: true,
// 深度监听
deep: true,
//handler方法名是固定的不可以被篡改
handler: function () {
this.car.expensive = this.car.price - this.car.price0
}
}
},
methods: {
carUp: function () { this.car.price++ },
up: function () {
this.price = this.price + 10
}
}
})
</script>
复制代码
5. 周期函数/钩子函数
<div id="app">
<h1>{{msg}}</h1>
<button @click="change">改变msg</button>
<button @click="destroy">销毁Vue实例</button>
<h1>{{time}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
/* Vue的八大生命周期钩子函数 */
/* 区别之一：执行顺序的问题 beforeCreate>created>beforeMount>mounted */
new Vue({
el: "#app",
data: {
msg: '我爱Vue',
time: 0,
timeId: null
},
/* Vue实例化对象创建之前 */
beforeCreate() {
/* 实例化对象创建之前是获取不到data里面的数据的 */
console.log('beforeCreate', this.msg)
},
/* Vue实例化对象创建之后 */
created() {
/* 实例化对象创建之后可以获取data里面的数据 */
/* 实例化对象创建之后不可以获取到dom包括根节点 */
console.log('created', this.msg, this.$el)
/* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
this.timeId = setInterval(() => {
this.time++;
console.log(this.time)
}, 500)
},
/* Vue的dom挂载之前 */
beforeMount() {
/* dom挂载之前可以获取到根节点 */
/* beforeMount还没有把data中的数据渲染到dom节点上 */
console.log('beforeMount', this.$el)
},
/* Vue的dom挂载之后 */
mounted() {
/* mounted已经把data中的数据渲染到了dom节点上 */
console.log('mounted', this.$el)
/* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
},
/* Vue的data值更新前 */
/* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated */
/* 顺序上 beforeUpdate执行顺序优先于updated */
beforeUpdate() {
console.log('beforeUpdate', this.msg, this.$el)
},
/* Vue的data值更新后 */
updated() {
console.log('updated', this.msg, this.$el)
},
/* Vue组件销毁前 */
/* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
/* 执行顺序上beforeDestroy优先于destroyed执行 */
/* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
beforeDestroy() {
console.log('beforeDestroy', this.msg, this.$el)
},
/* Vue组件销毁后 */
destroyed() {
console.log('destroyed', this.msg, this.$el)
clearInterval(this.timeId)
},
methods: {
change() {
this.msg = '我爱React'
},
destroy() {
this.$destroy();
}
}
})
</script>
