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="" >

　　　　　　.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 :red','font-weight':200}">这是一个h1</h1>

　　　　第二种：<h1 :>这是一个h1</h1>

　　　　　　<script type="text/javascript">

　　　　　　　　var vm = new Vue({

　　　　　　　　　　el:'#app',

　　　　　　　　　　data:{

　　　　　　　　　　　　styleobj:{'color':'red','font-weight':200}

　　　　　　　　　　}

　　　　　　　　});

　　　　　　</script>

　　　　第三种：<h1 :>这是一个h1</h1>

　　　　　　<script type="text/javascript">

　　　　　　　　var vm = new Vue({

　　　　　　　　　　el:'#app',

　　　　　　　　　　data:{

　　　　　　　　　　　　styleobj:{'color':'red','font-weight':200},

　　　　　　　　　　　　styleobj2:{'font-style':'italic'}

　　　　　　　　　　}

　　　　　　　　});

　　　　　　</script>