格式： v-xxx = “mustache语法” v-xxx = “msg” v-xxx = “{{msg}}” 错误用法
v-html 将一个数据展示在一个DOM内容中，相当于js中的innerHTML( html属性 )
这种形式可以防止脚本攻击 xss CSRF v-bind 单项数据绑定 使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind格式： v-bind:DOMattr = “data”简写： :DOMattr = “data”v-text 非转义输出 不会转义便签 v-html会转义数据里的标签
class vs style 添加类名和添加样式
.box_size{ width: 100px;height: 100px; } .box_color{ background: red; color: white; margin: 10px; }class
object 对象的形式 <div :class = "{[size]:true,[color]: true,[box]: true}"></div> <div :class = "{[size]: 5>2?true:false,[color]: true,[box]: true}"></div> arr 数组的形式 <div :class = "[size,box,color]"></div> <div :class = "[class_flag?size:'',box,color]"></div> new Vue({ el: '#app', data: { msg: 'hello vue.js', size: 'box_size', color: 'box_color', box: 'box', class_flag: true } }) 推荐使用arr形式style
<body> <div id="app"> <h3> 样式 </h3> <div class="box" style="width: 100px;height: 100px;background: red"></div> <h3> vue-style-对象形式 </h3> <div :style = "{width:'100px',height: '100px',background: 'blue'}"></div> <div :style = "style"></div> <hr> <h3> vue-style-数组形式 </h3> <div :style = "[style,border]"></div> </div> </body> <script src="../lib/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello vue.js', style: { width: '100px', height: '100px', background: 'yellow' }, border: { border: '1px solid black' } } }) </script> 推荐使用arr形式，更方便 条件渲染 v-if && v-show条件渲染有两个指令， 一个是 v-if , 另外一个是 v-show
v-if 有三种使用形式
单路分支双路分支多路分支 <body> <div id="app"> <h3> v-if 单路</h3> <p v-if = "flag"> 单路分支 </p> <h3> v-if 双路 </h3> <p v-if = "flag"> 双路1 </p> <p v-else> 双路2 </p> <h3> v-if 多路 </h3> <p v-if = "type === 'A' "> A </p> <p v-else-if = " type === 'B'"> B </p> <p v-else> C </p> </div> </body> <script> /* 1. v-if 如果值为false，那么绑定的DOM就会被销毁 2. v-if 操作的是一个DOM的生成和销毁 3. 如果v-if的初始值时false,那么这个DOM元素是不会渲染的 */ new Vue({ el: '#app', data: { msg: 'hello vue.js', flag: false, type: 'A' } }) </script> 1. v-if 如果值为false，那么绑定的DOM就会被销毁 2. v-if 操作的是一个DOM的生成和销毁 3. 如果v-if的初始值时false,那么这个DOM元素是不会渲染的v-show
<body> <div id="app"> <h3> v-show </h3> <p v-show = "flag"> hello vue.js </p> <template v-if = 'flag'> <div class="box" > <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </template> </div> <template> 123 </template> </body> <script> /* 1. v-show 操作的是一个DOM的dispay样式属性 2. 如果v-show的初始值是false,那么这个绑定的DOM元素是否会渲染呢？ v-show不管值是什么，它都会渲染出来 */ new Vue({ el: '#app', data: { msg: 'hello vue.js', flag: false } }) </script> 1. v-show 操作的是一个DOM的dispay样式属性 2. 如果v-show的初始值是false,v-show不管值是什么,都会渲染出来。v-if vs v-show 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
template template标签如果放在模板的范围内使用，那么将来不会被解析渲染 上例中template在#app之内就不会被浏览器解析渲染，如果在模板范围之外，浏览器会按照便签的形式进行解析渲染
列表渲染 v-for 是用来做列表渲染的 (相当于for循环) 格式 v-for = " xxx in(of) data " 举例： v-for = " item in(of) todos "带参数的格式 v-for = " (item,index) in todos " <body> <div id="app"> <h3> num </h3> <ul> <li v-for=" n in num "> {{ n }} </li> </ul> <hr> <h3> string </h3> <ul> <li v-for=" s of str"> {{ s }} </li> </ul> <hr> <h3> arr </h3> <ul> <li v-for=" item in arr "> {{ item }} </li> </ul> <h3> arr - v-for 带参数的 </h3> <ul> <li v-for="( item , index) in arr "> <p> item -- {{ item }} </p> <p> index ---{{ index }} </p> </li> </ul> <hr> <h3> object </h3> <ul> <li v-for=" item in obj "> {{ item }} </li> </ul> <h3> object-v-for 带参数 </h3> <ul> <li v-for=" (item,key) in obj "> <p> item -- {{ item }} </p> <p> key -- {{ key }} </p> </li> </ul> <h3> object-v-for 带三个参数 </h3> <ul> <li v-for=" (item,key,index) in obj "> <p> item -- {{ item }} </p> <p> key -- {{ key }} </p> <p> index -- {{ index }} </p> </li> </ul> <hr> <h3> json </h3> <button v-on:click="add"> 添加 </button> <button v-on:click="notChange"> 不能检测的 </button> <button v-on:click="clear"> 清空一个数组 </button> <ul> <li v-for="item in json"> //for循环的嵌套 <ul> <li v-for="(ele,index) in item" :key="index"> {{ ele }} </li> </ul> </li> </ul> <hr> <h3> 新数组 computed - filter </h3> <ul> <li v-for=" item in newJson" :key="item.id"> {{ item.text }} </li> </ul> </div> </body> <script> new Vue({ el: '#app', data: { msg: 'hello vue.js', num: 10, str: 'hi vue.js', arr: [1, 2, 3, 4], obj: { id: 1, name: 'wtf', age: 18 }, json: [ 'text',{ id: 1, text: '事件1' }, { id: 2, text: '事件2' } ] }, methods: { //这里面存放的都是事件的处理程序 add() { this.json.push({ id: 3, text: '事件3' }) }, notChange() { // this.json[0] = '事件4' //这样写点击按钮虽然改变了json,但是原来根据为未改变之前json数据渲染出的视图是不会更新改变的 //在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 //受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。（引用） //所以用到下面这个新属性 Vue-给对象新增属性（使用Vue.$set()）改变json即可改变视图 //代替 Object.assign() // Vue.set(this.json,0,'事件4') this.$set(this.json, 0, '事件4') }, clear() { // this.json.length = 0 删除json里的所有数据 this.json.splice(0, this.json.length) } }, computed: { // 计算属性 // 这里存放的也是方法，但是这个方法是有返回值的，并且方法名还可以当做一个变量（相当于直接在data里面定义的数据）来使用 newJson() { return this.json.filter(item => { return item.id > 1 }) } } }) </script>