<!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>
<!-- 在head里引入Vue可以避免出现抖屏现象 -->
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- 插值表达式 -->
<h1> {{ msg }} </h1>
<h1> {{ number }} </h1>
<!-- 提取文本会直接显示，提取的含有标签会转译为直接显示引号中的全部文本 -->
<h1 v-text = "number"></h1>
<!-- 会识别标签，直接显示对应的内容 -->
<h1 v-html = "content"></h1>
<!-- 给模板上的某个标签绑定一个事件 -->
<!-- 绑定一个事件，事件触发时候执行一个函数，这个函数要定义在实例里面的methods：{ } 属性下面。 -->
<div v-on:click = "handleClick"> {{ content }} </div>
<!-- v-on 的简写@ -->
<div @click = "handleClick"> {{ content }} </div>
</div>
<script>
new Vue ({
// 挂载点
el: "#root",
// 数据项
data: {
msg: "hello world",
number: 123,
// content:"<h1>hello</h1>"
content:"hello"
},
// 事件函数定义在methods下面,点击content内容，将hello变成Word
methods:{
handleClick: function(){
this.content = "word"
}
}
})
</script>
</body>
</html>
Vue实例
创建一个Vue实例，每个Vue应用都是通过 Vue 函数创建一个新的Vue实例 开始的：
var vm = new Vue ({
// 选项
})
文档中会使用 vm 这个变量名表示Vue 实例
当创建一个Vue实例时，可以传入一个选项对象。一个Vue应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的，可复用的组件树组成
所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）
挂载点，模板，实例之间的关系
挂载点：
最外层的标签就是挂载点。多为Vue里面的el ： "#root"
Vue只会去处理挂载点下面的内容，如果不在挂载点下面，就不会去处理它。
模板：
在挂载点内部的内容，都叫做模板内容，模板可以写在挂载点内部，也可以写在new Vue中的template："<h1>{{msg}}</h1>"
属性中.
实例：
在实例中，只需要指定一个挂载点，然后把模板写上，Vue会自动结合你的挂载点和模板，生成最终要展示的内容，
然后会把内容放在挂载点之中。
插值表达式：
{{ number }} 两个花括号开始两个花括号结束，中间写数据项下面的属性，这种语法叫做插值表达式。
指令：
v-text : 相比于v-html，v-text会将标签转译一次
v-html: 会直接识别标签，不会转译
v-on: 向一个标签上绑定一个事件，可以缩写为@
给模板上的某一个标签绑定一个事件：在vue里面给标签绑定一个事件，事件触发时候执行一个函数，这个函数要定义在实例里面的methods：{ } 属性下面。
网友评论