1.创建vue对象
<script src="vue.js"></script>
var vm = new Vue({
el:"#app",//挂载点，vue作用的范围只会在id为app的这个元素的内部
data:{
message:1824//定义当前组件所需要的一些状态，定义当前vue所需要的一些属性
}
})
2.v-text
在vue当中我们可以直接访问data中的属性
1.v-text：
底层原理主要是应用了在数据解析这块的innerText
eg：<h2 v-text="message"></h2>
2.v-text：
值可以写任何js的表达式
eg：
<h2 v-text="1+1"></h2>
<h2 v-text="message.slice(1)"></h2>
<h2 v-text="message?123:456"></h2>
3.v-text：
简写{{}}
区别：{{}}在页面第一次加载的时候会显示{{}}，而v-text不会
3.v-html
v-html：
解析html，相当于innerHTML
一般情况不会使用的，因为会有xss攻击，会通过这个在页面插入元素
eg：
<div v-html="p"></div>
4.v-show和v-if
1.v-show：底层是操作元素的display属性
显示隐藏，用于非权限问题（选项卡，组件切换，动画）
true：显示、
false：隐藏（在页面上显示和隐藏）
eg：
<div class="box" v-show="flag">
<input type="text">
</div>
2.v-if：底层是操控元素的创建和销毁
显示隐藏，用于权限问题（比如后台管理系统，用户会员级别，登录和非登录）
可以进行多个选择处理
true：显示
false：隐藏（所有元素创建销毁）
eg：
<div class="box" v-if="n==1">1111</div>
<div class="box" v-else-if="n==2">2222</div>
<div class="box" v-else>333</div>
5.v-for（数据的遍历）
1.可以遍历数组
eg：<li v-for="(item,index) in arr">{{item}}-----{{index}}</li>
2.可以遍历对象
eg：<li v-for="(val,key) in obj">{{val}}-----{{key}}</li>
3.可以遍历数组对象
eg：<li v-for="item in res">{{item.name}}</li>
4.可以遍历字符串
eg：<p v-for="item in str">{{item}}</p>
5.可以遍历数字
eg：<p v-for="item in 20">{{item}}</p>
6.v-on
1.v-on：
进行事件的绑定：冒号后面是事件的名称，值为事件的函数
eg:
methods:{
handle(){
console.log(111)
},
}//vue中所有的事件都需要放在methods中
2.语法：v-on：事件名称 = 事件函数
eg:<button v-on:click="handle()">点击</button>
3.简写：@事件名称
eg:<button @click="handle()">点击2</button>
7.修饰符
指令后面用.链接的属性叫做修饰符
.stop 阻止事件冒泡
.prevent 阻止浏览器默认事件
.once 事件只触发一次
.enter 回车
eg:
<div class="box" @contextmenu.prevent="menu()"></div>
<input type="text" @keydown.13="handlekeydown()">
8.事件对象
如果需要使用事件对象则需要传递一个$event
eg:
<div class="box" @click.once="handleBox($event,123)">
<div class="box1" @click.stop="handleBox1($event)"></div>
9.v-bind
1.绑定属性
2.简写 ：属性
3.语法： v-bind：属性 = 值
4.常见：title.class.id.alt.style.src.href
eg:
<div
v-bind:title="title"
v-bind:id="id"
v-bind:class="className2"
v-bind:alt="alt"
:style="myStyle"
></div>
ps:true是拥有属性
false是不拥有此属性
10.v-once
只绑定一次，数据的值只渲染一次
eg：<h2 v-once>{{message}}</h2>
11.v-pre
不解析vue的数据
eg：<div v-pre>v-pre他的作用不会解析{{message}}中的数据</div>
12.v-cloak
解决{{}}的第一次加载显示的问题
eg：
<h2 v-cloak>{{message}}</h2>
<style>
[v-cloak]{
display:none;
}
</style>
13.v-model
1.可以用来实现双数据绑定
eg：
<input type="text" v-model="inputVal">
<p>{{inputVal}}</p>
2.这个指令只能给表单进行使用
eg：
<label>
男：<input type="radio" v-model="radioVal" value="男">
</label>
<label>
女：<input type="radio" v-model="radioVal" value="女">
</label>
<p>您选择的性别是:{{radioVal}}</p>
3.是根据表单的value值来去改变data中属性的值
eg：
<select v-model="selectVal">
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
</select>
<p>您选择的年龄是：{{selectVal}}</p>
作用:如果表单上面加了v-model那么data中与表单绑定的那个属性就会随着表单的改变而改变
eg：
<label>
抽烟：<input type="checkbox" v-model="checkVal" value="抽烟">
</label>
<label>
喝酒：<input type="checkbox" v-model="checkVal" value="喝酒">
</label>
<label>
烫头：<input type="checkbox" v-model="checkVal" value="烫头">
</label>
<label>
大保健：<input type="checkbox" v-model="checkVal" value="大保健">
</label>
<p>您的爱好为:
<p v-for="item in checkVal">{{item}}</p>
</p>
14.面试题：
如何理解响应式原理？v-model的底层原理是什么？ 如果自己手动封装v-model?
var vm = new Vue({
el:"#app",
data:{
inputVal:"",
radioVal:"男",
checkVal:[],
selectVal:"1995"
},
methods:{
handleChange(e){
let val = e.target.value;
let flag = this.checkVal.includes(val);
if(flag){
var index = this.checkVal.indexOf(val);
this.checkVal.splice(index,1);
}else{
this.checkVal.push(val);
}
}
}
})
14.自定义指令（必须要在vue实例化之前创建）
全局创建：Vue.directive()
参数1：指令名称
参数2：指令实现的函数
参数1：指令作用的元素 DOM元素
参数2：指令的信息，是一个对象{value:表达式的结果,rawName:指令的全程,modifiers:修饰符}
eg1：
<div v-color="color" v-font="size">加油你们都是胖的</div>
Vue.directive("color", (el, { value }) => {
el.style.color = value;
})
eg2:
<div class="box" v-click="handleBox" v-hide.timeout>
<button v-click.s="handle">点击</button>
Vue.directive("font", (el, { value }) => {
el.style.fontSize = value;
})
Vue.directive("click",{
inserted(el,{value,modifiers}){
let {s} = modifiers
el.onclick = function(e){
if(s){
e.cancelBubble = true;
}
value();
}
}
})
Vue.directive("hide", (el, { value, modifiers }) => {
console.log(modifiers)
let { timeout } = modifiers;
console.log(timeout)
if (timeout) {
setTimeout(() => {
el.style.display = "none";
}, 2000)
} else {
el.style.display = "none";
}
})
局部创建：
directives：{
}