1 Vue中的内置指令
javascript
<script>
const vm = new Vue({
el: '#root',
data: {
n: 1,
m: 100,
name: 'Vue',
str: '<h3>你好</h3>'
}
})
</script>1.1 v-text
html
<div v-text="name"></div>1.2 v-html
html
<div v-html="str"></div>
1.3 v-cloak
1.4 v-once
html
<h2 v-once>初始化的n值: {{n}}</h2>
<h2>当前的n值: {{n}}</h2>
<button @click="n++">加1</button>
1.5 v-pre
html
<h2 v-pre>Vue其实很简单的</h2>
<h2>当前的n值: {{m}}</h2>
<h2 v-pre>当前的n值: {{m}}</h2>
<button @click="m++">加1</button>
2 自定义指令
【代码】
html
<!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都指向window
directives: {
// 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 生命周期
【代码】
html
<!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>
