Vue基础语法

　

一、引入
　　第一步：导入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>