| <body> <div id="app"> <!--调用属性的时候，可以计算,但别用++--> {{ num+1 }} <hr> <!-- 将data里的txt字符串反转 简单的程序，可以直接在html中去书写--> {{ txt.split('').reverse().join('') }} <hr> <!--胡子语法里面，带了单引号就是字符串，原样输出--> {{'content'}} <hr> <!--如果ok是true显示A，否则就显示B--> <!--三元运算符 ok?为真显示这里:为假就显示这里--> {{ ok? 'A':'B' }} </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ num:0, txt:'123456789', content:'文字文字', ok:false } }) </script> 插入值 数据绑定最常见的形式就是使用“Mustache”语法 { { } } 双大括号 的文本插值： <span>Message:{{ msg }}</span>
如果是标签的属性要使用值，就不能使用“Mustache”语法，需要写成使用v-bind指令： <av-bind:href="url" v-bind:title='tip'>百度网</a>
插入的值当中还可以写表达式： {{number + 1 }} {{ ok? 'YES' : 'NO' }} {{message.split('').reverse().join('') }} <av-bind:href="url">链接文字</a> 指令 指令(Directives)是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。
<!--根据ok的布尔值来插入/移除 <p> 元素 --> <pv-if="ok">是否显示这一段</p>
<!--监听按钮的click事件来执行fnChangeMsg方法 --> <buttonv-on:click="fnChangeMsg">按钮</button> 缩写 v-bind和v-on事件这两个指令会经常用，所以有简写方式：
<!--完整语法 --> <av-bind:href="url">...</a>
<!--缩写 --> <a:href="url">...</a>
<!--完整语法 --> <buttonv-on:click="fnChangeMsg">按钮</button>
<!--缩写 --> <button@click="fnChangeMsg">按钮</button> Class绑定 v-bind:class= 使用v-bind指令来设置元素的class属性，它们的属性值可以是表达式，vue.js在这一块做了增强，表达式结果除了是字符串之外，还可以是对象或者数组。 对象语法 当在标签的类名前添加了v-bing:(简写在class前价格:冒号)之后, 实际的类名指向了vue里面data里与标签类名相同名字的值 .red{color:red;}
<h1 :class='hong'>这是一个H1标签</h1>
var vm= new Vue({ el:'#app', data:{ hong:'red' } })
用这种方法时,类名写在前面,也可以同时添加多个类名,当data里的ok为true时,添加,为false时不添加 .red{color:red;} <!--用对象的写法判断是否要添加类名--> <h1 :class="{'red':ok,'blue':ok}">文字文字文字</h1>
var vm= new Vue({ el:'#app', data:{ ok:false, } })
可以给v-bind:class传一个对象，以动态的切换class <divclass="static"v-bind:class="{active:isActive,'text-danger':hasError}"></div>
data属性值如下：
data: { isActive: true, hasError: false } 最终渲染的效果：
<divclass="static active"></div> 也可以给v-bind:class传一个对象引用
<divv-bind:class="classObject"></div> data属性值可以写成：
data: { classObject: { active: true, 'text-danger': false } } 数组语法(建议) .red{color:red;}
<!--用数组的写法判断是否要添加类名 三元写法.如果条件等于,类名改为red.否则不修改--> <h1 :class="[ok?'red':'']">文字文字文字</h1> <h1 :class="[num==1?'red':'', ok?'blue':'']">文字文字文字</h1> var vm= new Vue({ el:'#app', data:{ ok:false, num:1 } })
可以给v-bind:class传一个数组，以应用一个class 列表
<divv-bind:class="[activeClass, errorClass]"></div> ......
data: { activeClass: 'active', errorClass: 'text-danger' } 最终渲染为：
<divclass="active text-danger"></div> 如果你也想根据条件切换列表中的class，可以用三元表达式：
<divv-bind:class="[isActive ? activeClass : '',errorClass]"></div> Class拓展:选项卡 <body> <div class="tab_con" id="app"> <div class="tab_btns"> <!--谁有active谁就高亮--> <!-- vue是没有选择器的。也不能通过事件直接控制类名。 所以vue的排他思想其实是,当点击事件发生改变了data里的num时 所有和num有关联的都会渲染执行一遍,以此来实现排他思想 排他都是需要改变data的某个值，判断类名的时候，根据这个值去调用不同的类名 --> <input type="button" value="按钮一" :class="[num==0?'active':'']" @click="num=0"> <input type="button" value="按钮二" :class="[num==1?'active':'']" @click="num=1"> <input type="button" value="按钮三" :class="[num==2?'active':'']" @click="num=2"> </div> <div class="tab_cons"> <!--谁有current谁就显示--> <div :class="[num==0?'current':'']">按钮一对应的内容</div> <div :class="[num==1?'current':'']">按钮二对应的内容</div> <div :class="[num==2?'current':'']">按钮三对应的内容</div> </div> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ num:0 } })
实例生命周期 每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM 等。同时在这个过程中会自动运行一些叫做生命周期钩子的函数，我们可以使用这些函数，在实例的不同阶段加上我们需要的代码，实现特定的功能。 beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (dataobserver)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始 beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted 实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用，一般用它来做dom的初始化操作。 <body> <div id="app"> <input type="text" id="txt"/> </div> </body> <script type="text/javascript"> //生命周期，vue会提供给我们一些，关于加载顺序的函数。 var vm = new Vue({ el:'#app', beforeCreate:function(){ console.log('beforeCreate') },
beforeMount:function(){ console.log('beforeMount') }, //当整个vue加载完毕之后，再加载这里面的代码 mounted:function(){ console.log('mounted') document.getElementById('txt').focus() } })
</script>
beforeUpdate 数据发生变化前调用 updated 数据发生变化后调用
| 
收藏
淘帖
踩
