1 Vue中的内置指令
<script>const vm = new Vue({el: '#root',data: {n: 1,m: 100,name: 'Vue',str: '<h3>你好</h3>'}})</script>1.1 v-text
<div v-text="name"></div>
1.2 v-html
<div v-html="str"></div>
1.3 v-cloak
1.4 v-once
<h2 v-once>初始化的n值: {{n}}</h2>
<h2>当前的n值: {{n}}</h2>
<button @click="n++">加1</button>
1.5 v-pre
<h2 v-pre>Vue其实很简单的</h2>
<h2>当前的n值: {{m}}</h2>
<h2 v-pre>当前的n值: {{m}}</h2>
<button @click="m++">加1</button>
2 自定义指令
【代码】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义指令</title><script src="../js/vue.js"></script>
</head><body><!-- 需求1：定义一个v-big指令，和 v-text功能类似，但会把绑定的数值方法10倍 --><!-- 需求2：定义一个v-fbind指令， 和v-bind功能类似，但可以让其绑定的input元素默认获得焦点--><div id="root"><h2>当前的n值: <span v-text="n"></span></h2><h2>放大十倍后的n值: <span v-big="n"></span></h2><button @click="n++">加1</button><hr><!-- <input type="text" v-bind:value="n"> --><input type="text" v-fbind:value="n"></div><script>/* // 定义全局指令Vue.directive('fbind', {// 1.指令和元素成功绑定时（一上来的时候）；bind(element, binding) {element.value = binding.value},// 2.指令所在元素被插入页面时调用inserted(element, binding) {element.focus()},// 3.指令所在模板被重新解析时调用update(element, binding) {// console.log('update')element.value = binding.value},}) */const vm = new Vue({el: '#root',data: {name: 'Vue',n: 1},// 所有指令相关的函数中的this都指向windowdirectives: {// big函数何时会被调用// 1.指令和元素成功绑定时（一上来的时候）；// 2.指令所在的模板被重新解析时；big(element, binding) {element.innerHTML = binding.value * 10},fbind: {// 1.指令和元素成功绑定时（一上来的时候）；bind(element, binding) {element.value = binding.value},// 2.指令所在元素被插入页面时调用inserted(element, binding) {element.focus()},// 3.指令所在模板被重新解析时调用update(element, binding) {// console.log('update')element.value = binding.value},}}})</script>
</body></html>
3 生命周期
【代码】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分析生命周期</title><script src="../js/vue.js"></script>
</head><body><div id="root"><!-- <h2 :style="{opacity: opacity}">欢迎学习Vue</h2> --><h2>当前的n值是: {{n}}</h2><button @click="add">加1</button><button @click="destory">点我销毁vm</button></div><script>const vm = new Vue({el: '#root',data: {n: 1,},methods: {add() {this.n++},destory() {console.log('销毁vm')this.$destroy()}},beforeCreate() {console.log('beforeCreate', this)// debugger},created() {console.log('created', this)},beforeMount() {console.log('beforeMount', this)},mounted() {console.log('mounted', this)},beforeUpdate() {console.log('beforeUpdate', this)},updated() {console.log('updated', this)},beforeDestroy() {console.log('beforeDestroy', this)},destoryed() {console.log('destoryed', this)}})</script>
</body></html>
