一.引入Vue包
Vue官网中直接复制Vue代码，开发版本，生产版本的区别和jQuery一致
放入自己新建的js文件中
二.创建一个Vue实例对象
const dom = new Vue({ //dom为html中dom元素的ID
el:"#app", //关联dom元素，可以理解为选择器
data:{ //传入dom元素中的数据，内部包含在 DOM 中可能使用的属性
msg:"你好，中国！" //传入DOM元素中的属性
}
})
三.插值表达式（胡子语法） -- {{}}
<div id="app">{{msg}}</div>
const app = new Vue({
el:"#app",
data:{
msg:"你好，中国！", //所有在dom需要用的数据都要事先在此声明,而且必须要实例化Vue对象
}
})
四.基础指令
1.v-text -- dom元素中插入文本内容
<div id="app" v-text="msg"></div> -- div标签内容为实例化Vue中声明的msg属性
<div id="app" v-text>{{msg}}</div>
实例化Vue对象...
2.v-html -- dom元素中插入html标签和文本内容（不推荐使用）
<div id="app" v-html="msg"></div> -- div标签内容为实例化Vue中声明的msg属性
<div id="app" v-html>msg</div>
实例化Vue对象...
注意！此指令会解析script标签内的代码，容易有注入风险，也叫xss攻击，Vue框架也已经帮我们禁止在msg里传入script标签，尽量不要使用
3.v-cloak -- dom元素加载时,会先加载{{}},再解析Vue中的JS语法,在style中事先书写v-cloak的CSS样式,该指令在元素渲染完成以后,Vue 会自动的删除 v-clock 这个属性
<style>
[v-cloak] { //事先声明v-cloak属性的CSS样式为隐藏,不会加载{{}},等待加载完毕后,会自动删除
display: none;
}
</style>
<div id="app" v-cloak>{{msg}}</div> //不支持<div id=“app” v-cloak="msg"></div>写法
4.v-pre -- 获取原始信息
<div id="app" v-pre>{{ msg }}</div> 输出结果为{{msg}},不会解析msg属性
不支持 <div id=“app” v-pre="msg"></div>写法
5.v-once -- 只读取执行一次，后面再改变，他不改变
<div id="app" v-once>{{ msg }}</div> 如果绑定了事件,改变了msg的值,只改变第一次,因为页面渲染的时候已经改变了msg的值，所以这里改变也不生效
不支持<div id="app" v-once =“msg”></div>写法
五.动态绑定属性 v-bind:
<div id="app" v-bind:href="href" v-bind:target="target"></div>
const app = new Vue({
el:"#app",
data:{
href:"https://baidu.com",
target: "_blank",
}
})
简写方法 :
<div id="app" :href="href" :target="target"></div>
六.动态绑定事件 v-on:
<div id="app">
<button v-on:click="sayHello">点我试试</button>
<button v-on:click="alert('你好，新中国')">点我试试</button> //直接输出alert()他会理解为在Vue实例对象中有alert方法
</div>
const app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
sayHello() {
window.alert("你好中国！")
},
alert(msg) {
window.alert(msg)
}
}
})
简写方法 @
<button @click="sayHello">点我试试</button>
七.事件绑定修饰符
直接书写在绑定的事件方法后
1. .stop -- 阻止事件冒泡
<div class="child" @click.stop="sayChild"></div> //阻止事件冒泡
2. .prevent -- 阻止事件默认行为
<a href="https://baidu.cn" @click.prevent="sayByby">点击我不想去百度</a> //阻止事件默认行为
注意:两种方法可以串联使用
<a href="https://baidu.cn" @click.stop.prevent="sayByby">点击我不想去百度</a>
八.按键修饰符
.enter -- 回车
.tab -- Tab切换按钮
.delete -- 捕获“删除”和“退格”键
.esc -- esc退出按钮
.space -- 空格键
.up -- 上键
.down -- 下键
.left -- 左键
.right -- 右键
使用 keyCode attribute 也是允许的(直接使用按键代表的数字)
<input v-on:keyup.13="submit">
按键修饰符，同时按键修饰符也可以 串联
<input v-on:keyup.13.prevent="submit">
八.循环指令
v-for 一般用来遍历data中的对象数组
//item自己定义名称,但是js语法""中的item改变{{}}中的item也要修改.并且 需要给每一个元素加一个 key 属性，目的是为了让 Vue 能够标记识别每一个 li 元素，方便后续的 更新、删除、添加 等操作
<li v-for="item in arrList" :key="index">{{ item }}</li>
data:{
arrList: ["蜡笔小新","迪迦奥特曼","辣椒油","辣椒酱","宫保鸡丁"],
},
九.分支指令
v-if 在指令里面是一个表达式,可以使用js语法
<div v-if="showTag">内容显示</div>
data:{
// 设置一个 布尔值，用来显示、隐藏页面，如果为false，不显示div内容，如果为true则显示
showTag: false,
}
使用js语法也可以实现
<div v-if="true">内容显示</div>
<div v-if="num >90">肥胖</div>
<div v-else-if="num >60">微胖</div>
<div v-else>苗条</div> //因为data数据中的num所以只会显示第三个div
data：{
num：50
}
v-show
<div v-show="showTag">内容显示</div> 也可以显示div内容
v-show 和 v-if 的区别
v-if 条件不成立的部分 html 结构都不会渲染
V-show 会添加一个 display:"none" 属性
template标签
和v-if和v-show配合使用，替换原有的遍历标签，它只是占位使用不会被解析
<ul> //原本写法
<li v-if="判断条件">1</li>
<li v-else>2</li>
</ul>
<ul> //template写法
<template v-if="判断条件">1<template>
<template v-else>2</template>
</ul>
十. v-model 双向数据绑定
该指令在表单中才有意义,能获取实时更新,当表单框或其他表单控件内容改变时data里面的msg也会改变
页面中其他的msg也会跟着data中的msg改变
<h1>{{msg}}</h1>
<input type="text" v-model="msg">
data:{
msg:"你好，中国！",
}
十一.v-model的修饰符
1.trim 来确保内容输入祛除首尾空白 -- 防止用户误操作
2.lazy 来更改 input 事件 为 change 事件 -- 失去焦点才触发
3.number 来确保用户输入的是一个 number 类型
4.串联操作
所有修饰符都能一起串联也能和v-model一起使用
<input type="text" v-model.trim.number.lazy="msg">
