1、Vue实例
1、每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：比如我们在下面这个例子中如果使用浏览器打开，我们在控制台输入vm.$data、vm.$el都能打印出响应的内容。在一个Vue实例中，像el，data，methods....还有很多，都叫做Vue的实例属性。这些实例属性都能通过 { 实例名.$实例属性名 }这种方式得到。
2、实际上每个组件都是一个Vue的实例，或者说一个Vue的项目都是由一个个的Vue的实例模块组成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div @click="handleBtnClick">
{{message}}
</div>
<item></item>
</div>
<script>
Vue.component("item", {
template: "<div> hello world </div>",
})
var vm = new Vue({
el: '#root',
data: {
message:'hello world',
},
methods: {
handleBtnClick: function() {
alert('hello');
}
}
})
</script>
</body>
</html>2、Vue的生命周期和生命周期钩子
1、什么是生命周期函数：Vue实例在某一个时间点会自动执行的函数。
2、当我们创建一个Vue的实例的时候，也就是使用new Vue的时候，Vue会自动的去初始化事件和生命周期。在这个时间段会执行的生命周期函数是beforeCreate。
3、接着会进行一些外部注入和双向绑定的一些操作后，基本Vue实例的初始化都完成了，这个时间点上会有个生命周期函数会自动执行 created。
4、接着会询问一个条件说：有没有el这个选项，然后再问你有没有template这个选项。如果没有的话：Complie el‘s outerHTML as template（把el外层的html作为模板：什么意思？就是说从el中找到那个Vue接管的DOM，把那部分内部或者整体作为当前模板,下面这个例子中就找到id为app的div，将<div id="app">hello world</div>整个作为模板来进行渲染。所以说：现在就可以稍微理解一下为什么是由一个个Vue的组件构成，写的DOM也不过是把Vue中的模板属性拿到了外面而已）。总结一下：有template就渲染template，没有就渲染外部监管的DOM。
<div id="app">hello world</div>
...
var app=new Vue({
el:'#app',
})
与下面是等价的：
<div id="app"></div>
...
var app=new Vue({
el:'#app',
template:"<div>hello world</div>"
})5、在页面渲染之前，也就是数据和模板想结合即将挂载在页面的之前的一瞬间，会自动执行一个生命周期函数 beforeMount。
6、在beforeMount执行后，数据和模板结合生成的Vue实例中的DOM元素就会挂载到页面上，在下面的例子中就是hello world被显示在页面上面后，又会自动执行一个生命周期函数 mounted。你能在下面的例子中看到在beforeMount执行的时候，id为app的DOM元素还什么都没有，执行mounted的之后，hello world已经出来了。
7、而数据更新和销毁的4个生命周期函数必须在数据更新和执行销毁函数xx.destroy()才会执行。我们下面的例子中有测试用例。
8、另外除了我们将的8个生命周期函数外，还有3个生命周期函数，我们在后面会讲到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue生命周期钩子</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm=new Vue({
el:'#app',
template:"<div @click='handleBtnDestory'>{{content}}</div>",
data:{
content:'hello world',
},
methods:{
handleBtnDestory:function() {
//this.$destroy(); //用来测试销毁destroy的生命周期函数
this.content="I'm changed";//用来测试updata的生命周期函数
}
},
beforeCreate:function() {
console.log("beforeCreate");
},
created:function() {
console.log("created");
},
beforeMount:function() {
console.log(this.$el); //输出结果是<div id="app"></div>
console.log("beforeMount");
},
mounted:function() {
console.log(this.$el); //输出结果是<div id="app">hello world</div>
console.log("mounted");
},
beforeDestroy:function() {
console.log("beforeDestroy");
},
destroyed:function() {
console.log("destroyed");
},
beforeUpdate:function() {
console.log("beforeUpdate");
},
updated:function() {
console.log("updated");
}
})
</script>
</body>
</html>3、模板语法
1、首先要明确的就是我们在指令后面跟的不是字符串，虽然是用引号包裹的，但指令后面跟着的是个JS表达式。
2、插值表达式、v-text、v-html之间的区别：插值表达式和v-text其实一样，对内容都是进行转义，显示原本的字符串内容，而v-html是对内容进行解析，如果内容是html表达式，按照html的方法展示。
3、对于插值表达式和v-text都是一个JS表达式，所以可以写成下面这样。而v-html就要分情况，如果是内容是html表达式，就不能再v-html后面的引号中写成JS表达式了，写了也没有效果，如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app"> <!--插值表达式-->
{{name + 'Lee'}}
<div v-text="name + 'Lee'"></div><!--Vue指令插值，让div中的innerHtml的内容变成name的内容，会显示<h1>dell</h1>这个字符串-->
<div v-html="name + 'Lee'"></div><!--Vue指令插值，解析name中的内容,如下所示会显示h1标签类型的dell-->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
name:"<h1>dell</h1>",
},
})
</script>
</body>
</html>可以在浏览器中看到效果：分别是插值，v-text，v-html：
