一、引入
第一步：导入vue.js文件
第二步：创建一个Vue实例
var 变量 = new Vue({
el: 选择器,//表示，我们当前new的这个vue实例，要控制页面上的那个区域
data:{//存放的是el中要用的数据
msg：'欢迎学习Vue'//通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作Dom元素
}
});
二、使用
1、data属性
v-cloak属性：可以解决差值表达式闪烁的问题：可以放任何位置
v-text属性：是没有闪烁问题：会覆盖原本里面的内容
v-html属性：可以识别HTML标签
v-bind属性：是Vue中提供绑定属性的指令
注意1、v-band:属性可以简写为:属性 ：v-band:title="title + 'aaa'"等价于:title="title + 'aaa'"
2、v-band:中可以写符合js的表达式：例如v-band:title="title + 'aaa'"
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: '124',
msg2: '<h1>我说H1，我很大</h1>',
title: "这是我自己写的title"
}
});
</script>
3、methods属性
v-on属性：事件绑定机制
方法一：<input type="button" value="点击" v-on:mouseenter="fn">
方法二：<input type="button" value="点击" @mouseenter="fn">
var vm = new Vue({
el: '#app',
data: {
msg: '124',
msg2: '<h1>我说H1，我很大</h1>',
title: "这是我自己写的title",
},
methods: {
fn: function() {
alert(444);
}
}
});
注意：方法属性的调用：如果当前Vue实例想调用其内部的属性和方法等,必须通过this关键字来获取,this表示当前new的Vue实例对象
4、事件访问修饰符
使用位置：<input type="button" value="点击" name="" id="" @click.访问修饰符="btnHandler">
.stop：阻止冒泡行为
.prevent：阻止默认行为
.capture：事件捕获机制，从外往里执行
.self：被修饰的元素只能通过自己来触发事件，只会阻止自己的冒泡行为，不会阻止别的元素
.once：只触发一次事件函数
5、v-model：双向数据绑定：（页面）（vue实例），任意一端数据发生变化时则另一端也改变
三、操作class属性
<!-- 第一种使用 -->
<h1 :class="['red','thin','italic']">这是一个很大很大的h1，大到你无法想象！！！</h1>
<!-- 使用三元表达式 -->
<h1 :class="['thin','italic',flag?'active':'']">这是一个很大很大的h1，大到你无法想象！！！</h1>
<!-- 在数组中使用对象代替三元表达式，提高代码的可读性 -->
<h1 :class="['thin','italic',{'active':flag}]">这是一个很大很大的h1，大到你无法想象！！！</h1>
<!-- 直接使用对对象，对象的属性是类名，属性值是布尔类型的标识符，由于数对象可以带引号，也可以不带引号 -->
<h1 :class="{active:true,red:false,thin:false}">这是一个很大很大的h1，大到你无法想象！！！</h1>
注意：这个放的可以把整个对象放到data中写；
四、操作行内的style属性
第一种：<h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>
第二种：<h1 :style="styleobj">这是一个h1</h1>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
styleobj:{'color':'red','font-weight':200}
}
});
</script>
第三种：<h1 :style="[styleobj,styleobj2]">这是一个h1</h1>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
styleobj:{'color':'red','font-weight':200},
styleobj2:{'font-style':'italic'}
}
});
</script>