v-text
<div id="root">
<!-- 向其所在的节点中渲染文本内容，会完全替换掉标签中的内容 -->
<h2 v-text="msg">哈哈哈</h2>
<!-- 不解析标签 -->
<h2 v-text="a"></h2>
<h2>{{ msg }}</h2>
</div>
<script src="../tools/vue.js"></script>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
msg: "hello dudu",
a: "<hr></hr>",
},
});
</script>
v-html
<div id="root">
<!-- 向其所在的节点中渲染文本内容，会完全替换掉标签中的内容 -->
<!-- 支持解析标签 -->
<h2 v-html="a">哈哈哈</h2>
<!--
有安全性问题
1. 在网站上动态渲染任意html是非常危险的，容易导致XSS攻击
2. 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上
-->
</div>
<script src="../tools/vue.js"></script>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
a: "<hr></hr>",
},
});
</script>
v-cloak
<style>
[v-cloak] {
display: none;
}
</style>
<div id="root">
<!-- 可以为这样的结构增加一个属性，用css控制显示，在Vue接管该结构以后该属性会被删除 -->
<h2 v-cloak>{{ msg }}</h2>
</div>
<!-- 如果下面的引入请求服务器比较慢，页面就会先解析，显示 {{ msg }} -->
<script src="../tools/vue.js"></script>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
msg: '大河之剑天上来！'
},
});
</script>
v-once
<div id="root">
<!-- 在初次动态渲染后就视为静态内容，结构不再变化，可以用于优化性能 -->
<h2 v-once>初始化n的值为：{{ n }}</h2>
<h2>当前n的值为：{{ n }}</h2>
<button @click="n++">点我n+1</button>
</div>
<script src="../tools/vue.js"></script>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
n: 1,
},
});
</script>
v-pre
<div id="root">
<!-- 跳过该节点的编译过程：跳过没有使用指令语法和插值语法的节点，加快编译 -->
<h2 v-pre>hello dudu</h2>
<h2>当前n的值为：{{ n }}</h2>
<button @click="n++">点我n+1</button>
</div>
<script src="../tools/vue.js"></script>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
n: 1
},
});
</script>
自定义指令
<div id="root">
<h2>当前的n值是：<span v-text="n"></span></h2>
<h2>放大后的n值是：<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
<hr>
<input type="text" v-fbind:value="n">
</div>
<script src="../tools/vue.js"></script>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
n: 1
},
directives: {
// 调用时机：指令与元素成功绑定时；指令所在的模板被重新解析时
big(element, binding) { // element：真实的dom元素 binding：绑定
element.innerText = binding.value * 10;
console.log("big");
},
fbind: {
// 指令与元素绑定成功时
bind(element, binding) {
console.log('bind');
element.value = binding.value;
},
// 指令所在元素被插入页面时
inserted(element, binding) {
console.log('inserted');
element.focus();
},
// 指令所在的模板被重新解析时
update(element, binding) {
console.log('update');
element.value = binding.value;
}
}
}
});
</script>
1. 如果指令名比较复杂需要多个单词，单词之间使用 - 连接(v-big-number)，在配置directives时，
需要使用单引号来声明对象的key('big-number':{})
2. 指令回调函数中的this都是window对象
3. 自定义指令只能在当前的Vue实例中使用，
如果要全局使用，可以使用 Vue.directive('fbind', {配置对象})
生命周期
生命周期又叫生命周期回调函数、生命周期函数、生命周期钩子
生命周期函数是Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向的是vm或组件实例对象
关于销毁Vue实例
1. 销毁后借助Vue开发者工具看不到任何信息
2. 销毁后自定义事件会失效，但原生DOM事件依然有效
3. 一般不会在beforeDestroy中操作数据，因为即便操作数据，也不会再出发更新流程了
非单文件组件
1. 组件的使用
<!-- 创建组件；注册组件；使用组件 -->
<div id="root">
<h1>{{msg}}</h1>
<hr>
<!-- 使用组件 -->
<school></school>
<hr>
<student></student>
</div>
<script src="../tools/vue.js"></script>
<script>
Vue.config.productionTip = false;
// 创建school组件
const school = Vue.extend({
// 不写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务哪个容器
// 配置组件结构
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="show">点我提示学校名</button>
</div>
`,
// data必须写成函数，避免组件被复用时，数据存在引用关系
data() {
return {
schoolName: 'sgg',
address: 'beijing'
}
},
methods: {
show() {
alert(this.schoolName)
}
},
});
// 创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
studentName: 'dudu',
age: 22
}
}
});
// 全局注册组件
Vue.component('school', school);
const vm = new Vue({
el: "#root",
// 局部注册组件
components: { student },
data: {
msg: "你好啊"
},
});
</script>
一些注意点
组件名写法：
* 一个单词：school 或者 School
* 多个单词：MySchool(需要脚手架支持) 或者 my-school
标签名写法：
* <school></school> 或者 <school/>(需要使用脚手架，否则后续组件不能渲染)
创建组件的简写方式：const school = {}
可以在对象中添加name属性指定组件在开发者工具中呈现的名字 const school = { name: 'SchoolNameTest', template... }
2. 组件的嵌套
标准写法
<div id="root"></div>
<script src="../tools/vue.js"></script>
<script>
Vue.config.productionTip = false;
const student = {};
// 学生组件作为学校组件的子组件：在学校组件中注册并使用
const school = {
template: `<student></student>`,
components: { student }
};
const hello = {};
// app组件放置在vm中，管理所有的组件
const app = {
template: `
<div>
<hello></hello>
<hr>
<school></school>
</div>
`,
components: { school, hello }
};
const vm = new Vue({
el: "#root",
template: `<app></app>`,
components: { app },
});
</script>
3. VueComponent 构造函数
<div id="root">
<hello></hello>
<school></school>
</div>
<script src="../tools/vue.js"></script>
<script>
Vue.config.productionTip = false;
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="show">点我提示学校名</button>
</div>
`,
data() {
return {
schoolName: 'sgg',
address: 'beijing'
}
},
methods: {
show() {
// 4.组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this都是 VueComponent实例对象
console.log("show", this);
alert(this.schoolName);
}
},
});
const hello = Vue.extend({
template: `
<div>
<h1>{{msg}}</h1>
</div>
`,
data() {
return {
msg: '你好',
}
},
});
// 1.school组件本质是一个名为VueComponent的构造函数，是Vue.extend生成的
// 2.使用<school></school>或<school/>，Vue在解析时会创建school组件的实例对象，即执行：new VueComponent(options)
console.log("@", school);
// 3.每次调用Vue.extend，返回的都是一个全新的VueComponent
console.log(hello === school); // false
const vm = new Vue({
el: "#root",
components: { school, hello }
});
// vm.$children 保存子组件
console.log(vm);
</script>
一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype，作用是让vc可以访问到Vue原型上的属性和方法