vue的指令
Posted 闷骚的少年
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的指令相关的知识，希望对你有一定的参考价值。
我之前学了学angular
发现angular和vue的指令有点类似
先说一下
new Vue({
el: "#box", // element（元素） 当前作用域
data(){
return { //用return返回对象
msg: "122"
}
}
})
首先是
v-model双向绑定数据
<input type="text" v-model="msg"/> {{msg}} <!--取数据-->
v-for循环
1 <div id="box"> 2 <ul> 3 <!--ng-repeat--> 4 <li v-for="item in arr"> 5 <span>{{item.name}}</span> 6 <span>{{item.age}}</span> 7 </li> 8 </ul> 9 </div> 10 <script type="text/javascript"> 11 new Vue({ 12 el:‘#box‘, 13 data(){ 14 return{ 15 // arr:[‘module‘,‘views‘,‘controlle‘,‘aaaaa‘] 16 arr:[ 17 {"name":"xiaohong1","age":12}, 18 {"name":"xiaohong2","age":12}, 19 {"name":"xiaohong3","age":12}, 20 {"name":"xiaohong4","age":12} 21 ] 22 } 23 } 24 }) 25 </script>
v-show 显示与隐藏
<div id="box"> <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div> </div> </body> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
v-if显示与隐藏 （dom元素的删除添加 个人理解）
<div id="box"> <div style="width: 100px;height: 100px;background: black;" v-if="show"></div> </div> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
v-else
<div id="box"> <div style="width: 100px;height: 100px;background: black;" v-if="show"></div> <div style="width: 300px;height: 300px;background: blue" v-else=""></div> </div> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
v-else-if
<div id="box"> <div style="width: 100px;height: 100px;background: black;" v-if="show"></div> <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div> <div style="width: 300px;height: 300px;background: blue" v-else=""></div> </div> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
v-bind
<div id="box"> <input type="text" v-bind:value="msg"> <a :href="link">点击</a> </div> <script> new Vue({ el: "#box", data(){ return { msg: "12222", link:"1、v-model.html" } } }) </script>
v-on 事件
<div id="box"> <!-- v-on --> <button v-on:click="say">按钮</button> <!--<button @click="say">按钮</button>--> </div> <script> new Vue({ el: "#box", data(){ return {} }, methods: { say() { alert(111); } } }) </script>
v-text读取文本不能读取html标签
1 <div id="box"> 2 <div v-text="msg"></div> 3 </div> 4 5 <script> 6 new Vue({ 7 el: "#box", 8 data(){ 9 return { 10 msg:"11111" 11 } 12 }, 13 methods: { 14 say() { 15 alert(111); 16 } 17 } 18 }) 19 </script>
v-html 能读取html标签
<div id="box"> <div v-html="msg"></div> </div> <script> new Vue({ el: "#box", data(){ return { msg:"<h1>121212</h1>" } }, methods: { say() { } } }) </script>
v-class 类名
1 <style> 2 .red { 3 4 background: red; 5 } 6 7 .blue { 8 width: 100px; 9 height: 100px; 10 background: blue; 11 } 12 13 </style> 14 15 16 <div id="box"> 17 <div style="width: 100px;height: 100px;" v-bind:class=‘{red:isred}‘></div> 18 <!--<div style="width: 100px;height: 100px;" v-bind:class=‘isred?"red":"blue"‘></div>--> <!--三元运算符方式--> 19 <!--<div style="width: 100px;height: 100px;" v-bind:class=‘[{red:"isred"}]‘></div>--> 20 21 </div> 22 23 24 <script> 25 new Vue({ 26 el: "#box", 27 data(){ 28 return { 29 isred:false 30 } 31 } 32 }) 33 </script>
v-style 与v-class用法大致一样 这个我就不写了
v-once 与我下边的例子 就是 加载一次 如果用到事件中就是事件只执行一次（@click.once="show"）
<div id="box"> <div v-once>{{msg}}</div> </div> <script type="text/javascript"> new Vue({ el:"#box", data(){ return{ msg:"qwdqwdqwd" } } }) </script>
v-cloak防闪烁
<div id="box"> <div v-cloak="">欢迎--{{msg}}</div> </div> <script> new Vue({ el:"#box", data(){ return{ msg:"111111" } } }) </script>
v-pre 把标签内部的元素原位输出
<div id="box"> <div v-pre>欢迎--{{msg}}</div> </div> <script> new Vue({ el:"#box", data(){ return{ msg:"111111" } } }) </script>
接下来就是一个总结了
1 vue 是什么 2 3 简介型的javascript框架 个人开发 (刘雨溪) 4 5 特点：mvvm m=mvc module 模型 v=view 视图 c=controller 控制器 6 mvvm m=mvc module 模型 v=view 视图 vm (视图与数据之间的传递) 7 vue1 双向数据绑定 vue2 单向数据流 8 单页面应用 9 10 11 12 13 v-model 数据绑定 14 data 返回对象用 return 15 16 v-for 循环 格式 v-for="字段名 in(of) 数组json" 17 18 v-show 显示 隐藏 传递的值为布尔值 true false 默认为false 19 20 v-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false 21 22 v-else-if 必须和v-if连用 23 24 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 25 26 v-bind 动态绑定 作用： 及时对页面的数据进行更改 27 28 29 30 v-on 绑定事件 函数必须写在methods里面 31 @click 快捷方法 32 33 v-text 解析文本 34 35 v-html 解析html标签 36 37 v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}‘ 2、三目型 ‘isred?"red":"blue"‘ 3、数组型 ‘[{red:"isred"},{blue:"isblue"}]‘ 38 39 v-once 进入页面时 只渲染一次 不在进行渲染 40 41 v-cloak 防止闪烁 42 43 v-pre 把标签内部的元素原位输出
以上是关于vue的指令的主要内容，如果未能解决你的问题，请参考以下文章