1.使用CDN引入Vue※
在<body>标签中加入下行即可
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>2.挂载点※
声明格式
el: "对象选择器+挂载名"，//如：el: "#app"挂载点可以挂载到任意标签中（如：<div>, <p>, <h1>等），且被挂载的标签的子标签也会被挂载上
对象选择器一般用#，即ID选择器，一定不能缺少对象选择器，否则无法起作用
挂载名是合法名称即可
代码片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>挂载点演示</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<div>
<!--引入VUE-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<srcipt>
var app = new Vue({
el: "#app", //表示用id选择器进行挂载
data: {
message: "Hello World!"
}
})
</script>
</body>
</html>这段代码能将HelloWorld显示到<p>中，其中，message可以是字符串，也可以是合法的js表达式。
3.插值语法※
作用：将Vue实例的值插入标签中
格式：
{{ 字段名 }} //双花括号嵌套，python Django框架也是这个语法
双花括号内可以是字段名也可以是合法的Js表达式例如第2点中，<p>{{ message }}</p>就表示将message的值显示到<p>标签中
4.数据块※
数据声明在data块中，声明格式如下
数据名: 数据值数据值可以是数字、字符串、数组等合法的数据类型
代码片段：
<body>
<!--引入VUE-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: { //data块用于声明数据
message: "HelloWorld!", // 各个字段及其默认值，多个字段间用逗号隔开，如果只有单个字段可以不加逗号
}
})
</script>
</body>5.函数※
函数声明在methods块中，声明格式如下
函数名: function(<参数列表>) {
函数体。
}多个函数间使用逗号分隔
代码片段：
<body>
<!--引入VUE-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
func_name: function() {
//todo something here.
}
}
})
</script>
</body>6.v-text指令※
作用：将Vue实例值插入到标签中，某种程度上与插值语法作用差不多，一般用插值语法即可
格式：
v-text="字段名" //与插值语法不同，v-text仅能够插入字符串，不能解析表达式这种写法会导致整个标签的文本被替换成字段的值
7.v-html※
作用：与v-text差不多，但是可以支持<a>标签的解析
格式：
v-html="字段名" //这里的值可以是一个a标签，它会自动解析地址，如果是普通文本，则和v-text是一样的。8.v-bind指令※
作用：动态绑定属性
格式：
v-bind:属性=值
:属性=值 //简写代码片段：
<body>
<div id="app">
<p v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</p>
</div>
<!--引入VUE-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: message: '页面加载于 ' + new Date().toLocaleString()
}
methods: {
func_name: function() {
//todo something here.
}
}
})
</script>
</body>9.v-on指令※
作用：绑定DOM事件响应，监听器
格式：
v-on:事件="响应函数名"
@事件="响应函数名" //简写常见事件类型：
鼠标事件：
click：单击事件
dblclick: 双击事件
键盘事件：
keyup: 键盘弹起
keydown: 键盘按下
键盘事件可以加上对应的键盘，进行进一步控制，如：keyup.enter:表示回车键弹起 代码片段：
<body>
<div id="app">
<input type="button" value="v-on指令单击" v-on:click="doIt">
<input type="button" value="v-on简写单击" @click="doIt">
<input type="button" value="v-on双击事件" v-on:dblclick="doIt">
</div>
<!--引入VUE-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
doIt:function() {
alert('DoIt');
}
}
})
</script>
</body>10.v-for※
作用：循环，一般用于列表
格式：
v-for="item in 数组名", //item这个命名是可以改的，取得的是数组中的元素
v-for="(item, index) in 数组名" //item和index命名可更改，item是数组中的元素，index是item对应的索引11.v-model※
作用：数据双向绑定，一般用于表单
格式：
v-model=属性名代码片段：
<body>
<div id="app">
<input type="text" v-model="val"/>
<p>{{ val }}</p>
</div>
<!--引入VUE-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
val: "HelloWorld!"
}
})
</script>
</body>可以看到，当修改了input中的数据时，<p>标签显示的数据也会跟着更改。
