完整代码链接
模板 {{}}
当所谓的数据（data）发生改变的时候，输出的内容会默认的重新渲染一遍，如果为了安全起见想数据只渲染一遍不再改动的话前面加个*就好了
模板1
- 当改成这样的时候点击按钮将不会再次渲染
html部分： <input type="button" @click="fn" value="点我"> {{*msg}}js部分： <script> new Vue({ el:'body', data:{ msg:'hello', }, methods:{ fn:function(){ this.msg='change'; } } }) </script>模板2
- Vue中输出data为html代码应该怎么显示
- 在Vue中 两个花括号
{{}}相当于原生js的innerText，三个花括号{{{}}}相当于原生js的innerHTML。
html部分： <style> div{ width: 100px; height: 100px; background: black; color: white; } </style><body> //尝试将这里改为两个看下是否正常显示html标签{{{msg}}} </body>js部分： <script> new Vue({ el:'body', data:{ msg:'<div>这里是一个div</div>', } }) </script>注意：建议还是用两个花括号{{}}innerText，防止其他人恶意注入
属性 -- 常用属性class及style
属性 -- src
html部分： <style> img{ height: 375px; width: 500px; } </style> <input type="button" value="change" @click="btn"> //这里的属性如果用原生js的话需要使用vue模板才能接收到vue对象中的data //src="{{url}}" <img v-bind:src="url"> js部分： new Vue({ el:'body', data:{ //num 是计数器开关，用于控制图片切换 num:0, url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg", }, methods:{ btn:function(){ this.num++; this.num%2==1?this.url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560472659224&di=896584de51fc9b26933157aed6a00ff7&imgtype=0&src=http%3A%2F%2Fimg08.oneniceapp.com%2Fupload%2Favatar%2F2018%2F05%2F05%2Faba7e29327a27abfcb1e525f623934ee.jpg": this.url="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg"; } } })- 如果使用原生js的话需要使用vue模板
{{}}如果使用vue方法的话则不需要 v-bind:scr="url"可以缩写前缀vue方法为冒号:src="url"，这样的写法vue也可以识别
属性 -- class
- 使用vue传输
innerText的原理，传输文本作为类名
html部分： <style> div{ width: 100px; height: 100px; } .red{ background: red; } </style> <input type="button" value="click" @click="btn"> <div v-bind:class="myDiv"></div> <!-- 或者使用原生的 class="{{myDiv}}-->js部分： <script> new Vue({ el:'body', data:{ myDiv:'red', } }) </script>一般赋予多个类的话在html中是
class="a b c"，而在vue中则是以数组或json格式，因为json是键值对格式的，相当于数组的下标与索引值的关系。- 什么是键值对格式 --
key:value(例子：width:200px;) - 数组格式
- 什么是键值对格式 --
html部分： <style> div{ width: 100px; height: 100px; } .red{ background: red; } .shadow{ box-shadow: 0 0 15px; } </style> <input type="button" value="click" @click="btn"> <div v-bind:class="myDiv"></div>js部分： <script> //最常用的属性‘class’‘style’ new Vue({ el:'body', data:{ //赋予多个class 属性一般直接'class="a b c"' 在vue中则使用数组形式 //['a','b','c'] myDiv:['red','shadow'], }, methods:{ //切换class //方法‘pop()’是去除class的，方法‘push()’是插入class的 //如果只用‘pop’方法的话会一直去除class 样式直到数组为空 btn:function(){ this.myDiv.length==1?this.myDiv.push('shadow'):this.myDiv.pop('shadow'); } } }) </script>- json格式
html部分： <style> div{ width: 100px; height: 100px; } .red{ background: red; } .shadow{ box-shadow: 0 0 15px; } .animate{ transition: 0.5s; } </style> <input type="button" value="click" @click="btn"> <div v-bind:class="myDiv"></div>js部分： <script> new Vue({ el:'body', data:{ //使用json 格式也可以 myDiv:{ red:true, shadow:true, animate:true, } }, methods:{ btn:function(){ this.myDiv.shadow=!this.myDiv.shadow; } } }) </script>Style三种传输格式
style在vue中有三种传输格式
- json
- json数组 - [ json ,json ,json ]
- string
- 其中json与string格式差不多
json格式
- 因为style原生的代码本来就是类似于json格式的，所以能用json格式传输不出奇
html部分：<input type="button" value="cahnge" @click="btn"><div v-bind:style="myDiv"></div>js部分： <script> new Vue({ el:'body', data:{ myDiv:{ width:"200px", height:"200px", background:"red", transition:"0.5s" } }, methods:{ btn:function(){ this.myDiv.width="400px"; this.myDiv.height="400px"; this.myDiv.background="green"; } } }) </script>json数组形式
- 就像赋予多个类，每个类不同样式一样，你可以定义多个类赋予给同一个标签，同样的也相当于赋予一个标签多个不同作用域下的样式，用json数组形式赋予检查网页代码可以看到样式都给添加进去了
html部分：<input type="button" value="cahnge" @click="btn">//这里给style赋予了两个样式 <div v-bind:style="[myDiv,green]"></div>js部分：<script> new Vue({ el:'body', data:{ myDiv:{ width:"200px", height:"200px", background:"red", transition:"0.5s" }, green:{ background:"green", } }, methods:{ btn:function(){ this.myDiv.width="400px"; this.myDiv.height="400px"; this.myDiv.background="green"; } }}) </script>string形式
- string形式其实和json格式的写法一样，但是特意拿出来说是因为他们的概念不一样，string形式是利用vue的类似于
innerText的操作来赋予样式的，而json形式的概念突出他的数据格式
html部分：<input type="button" value="cahnge" @click="btn"><div v-bind:style="myDiv"></div>js部分： <script> new Vue({ el:'body', data:{ myDiv:{ width:"200px", height:"200px", background:"red", transition:"0.5s" } }, methods:{ btn:function(){ this.myDiv.width="400px"; this.myDiv.height="400px"; this.myDiv.background="green"; } } }) </script>小案例演示：vue-tab面板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab面板</title> <script src="../vue.js"></script> <style> div{ width: 100px; height: 100px; background: #ccc; } input.active{ background: red; } </style></head><body> <!-- $index 是当前按钮的下标值--><input type="button" v-for="i in value" :value="i" :class="$index==index?'active':''" @click="btn($index)"><div v-for="i in inner" v-show="$index==index?true:false" > {{i}}</div> <script> new Vue({ el:'body', data:{ index:0, value:['leo','sky','li'], inner:['今年18岁了','今年31岁了','今年22岁了'] }, methods:{ btn:function(myIndex){ this.index=myIndex; } } }) </script></body></html>