Vue.js

------------------------------- install ---------------------------------------------------- <div id="app"> </div> <script src="lib/vue.js"></script> //三种选择方式 <script> //1 var vm = new Vue( el: #app ); //2 var vm = document.querySelector(#app); var vm = new Vue({ el:app }); //3 var vm = new Vue({}); vm.$mount(#app); console.log(vm.$el); </script>

<div id="app"> <ul> <li>第一段内容{{ 12 > 3 ? "啊":"不" }}</li> <li id="{{ 1 + 2 }}"//这是错的,插值表达式不能写在id里>第一段内容{{ 12 > 3 ? "啊":"不" }}</li> <li>第三段内容{{ var num = 100;//这是错的,javascript不能写在内容里 }}</li> </ul> </div> <script src="lib/vue.js"></script> //三种选择方式 <script> //1 var vm = new Vue( el: #app ); //2 var vm = document.querySelector(#app); var vm = new Vue({ el:app }); //3 var vm = new Vue({}); vm.$mount(#app); console.log(vm.$el); </script>

<div id="app"> <ul> <li>{{ contentArr[0] }}</li> <li>{{ contentArr[1] }}</li> <li>{{ contentArr[2] }}</li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { contentArr: [内容1,内容2, 内容3] } }); </script> --------------------------------- console -------------------------------------------------- Vue.set(vm.contentArr, 0, new content); //vm.contentArr[0] = "new" 这个不work不会跟新视图 //vm.contentArr.length = 0; 这个不work不会清空视图 可以用vm.contentArr.pop()或vm.contentArr.push(插入新的内容);

<div id="app"> <ul> <li>{{ title1.split(-).join() }}</li> <li>{{ fn(title1) }}</li> <li>{{ contentArr[2] }}</li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { prefix: "result", title1 = a-b-c-d-e, title2 = x-y-z }, methods: { fn (value) { this.fn1(); this.fn2(); return this.prefix + value.split(-).join(); }, fn1(){ console.log(did 1); }, fn2(){ console.log(did 2); } } }); </script>

//只生效一次 v-once <div id="app"> <ul> <li>{{ content }}</li> <li v-once>{{ content }}</li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { content = 内容文本 } }); </script> ----------------------------------------console------------------------------------------- vm.content = change// v-once不随这个改变

<div id="app"> <ul> <li> abc </li> <li v-text = "100"> def </li> <li v-text = "content"> ghi </li> <li v-html = "content1"> ghi </li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { content = 内容文本, content1 = <span>html不会生效，会原封不动的跟新到视图。需要绑定v-html到li</span> } }); </script> ----------------------------------------console------------------------------------------- vm.content = new// ghi 变 new

<div id="app"> <ul> <li> abc </li> <li v-bind = "100"> def </li> <li v-text = "content"> ghi </li> <li v-html = "content1"> ghi </li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { content = 内容文本, content1 = <span>html不会生效，会原封不动的跟新到视图。需要绑定v-html到li</span> } }); </script>

<div id="app"> <ul> <li> abc </li> <li v-bind = "100"> def </li> <li v-text = "content"> ghi </li> <li v-html = "content1"> ghi </li> <li :class="num+1+2"> ghi </li> <li :class="prefix + num"> ghi </li> <li :class="cls"> ghi </li> <li :class="bool ? cls1 : cls2"> ghi </li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { attrObj: { id: box, title: title, class: clearFix, data-title: sdf } myTitle:mt, prefix: demo, num: 10, cls = q w e//多个类名设置，不常用 cls1: a, cls1: b } }); </script>

<p :class="{ x:isX, y:false, z: true}"></p> <script> var vm = new Vue({ el: #app, data: { isX: true, } }); </script>

<p :class="[a, classB, {c: isC}]"></p> <script> var vm = new Vue({ el: #app, data: { classB: b, isC: true, } }); </script> ------------------------------------------console------------------------------------- vm.isC = false

<p :style="styleObj"></p> <script> var vm = new Vue({ el: #app, data: { styleObj: { weight:200px, height:100px, backgroundColor: red, font-size: 30px } } }); </script>

<p :style=[baseStyle, styleObj1]></p> <script> var vm = new Vue({ el: #app, data: { baseStyle: {}, styleObj1: { weight:200px, height:100px, backgroundColor: red, font-size: 30px } } }); </script>

<div id="app"> <ul> <li v-for="(item, index) in arr"> 内容为：{{ item }} 索引为:{{ index }} </li> //arr <li v-for="(value, key, index) in obj"> 内容为：{{ value }} 键为:{{ key }} </li> //obj </ul> <ul> <li v-for="(item, index) in 5"> 内容为：{{ item }}, {{ index }} </li> </ul> </div> <script> new Vue({ el: #app, data: { arr:[1, 2, 3], obj: { content1: 内容1, content2: 内容2, } } }); </script>

<div id="app"> <ul v-if="true"> <li v-for="item in arr" :key="item"> 输入框{{ item }}, <input type="text"></li> <li v-for="(item, index) in itemList" :key="item.id"> 输入框{{ item.value }}, <input type="text"></li> </ul> </div> <script> new Vue({ el: #app, data: { arr:[1, 2, 3], obj: { content1: 内容1, content2: 内容2, }, itemList: [ { id:1, value:1 }, { id:2, value:3 }, { id:3, value:3 } } }); </script> -------------------------------------console------------------------------------------------ vm.arr.reverse() //设置key为item，内容随着倒转，index不倒转 vm.itemList.reverse() //设置key为item.id，内容随着倒转

<div id="app"> <ul> <template v-for="item in obj"//template不设置key> {{ item }} <br> </template> </ul> </div> <script> new Vue({ el: #app, data: { arr:[1, 2, 3], obj: { content1: 内容1, content2: 内容2, } } }); </script>

<p v-if="bool">这是第一个p标签</p> <p v-else-if="bool">这是第二个p标签</p> <p v-else-if="bool">这是第三个p标签</p> <p v-else="bool">这是第四个p标签</p> <script> var vm = new Vue({ el: #app, data: { bool: false } }); </script>

<div id="app"> <p>{{ content }}</p> <button v-on:click="content=abc">1</button> <button @click="content=abc">2</button> //common <button @click="fn">3</button> //common <button @click="fn(200, event)">3</button> </div> <script> new Vue({ el: #app, data: { content: 内容1, }, methods: { fn() { this.content = 33333333333; } fn2(value, event){ console.log(value, event); } } }) </script>

<div id="app"> <p>{{ value }}</p> <p>单个复选框的值{{ value3 }}</p> <p>多个复选框的值{{ value4 }}</p> <input type="text" v-model="value"> <textarea v-model="value1"> <input type="radio" id="one" value="1" v-model="value2"> <label for="one">选项1</label> <input type="checkbox" value="选项内容" id="two" v-model="value3"> <label for="two">选项内容</label> <input type="checkbox" value="选项1" id="1" v-model="value4"> <label for="1">选项1</label> <input type="checkbox" value="选项2" id="2" v-model="value4"> <label for="2">选项2</label> <input type="checkbox" value="选项3" id="3" v-model="value4"> <label for="3">选项3</label> <p>{{ value5 }}</p> <select v-model="value5"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <p>{{ value6 }}</p> <select v-model="value6" multiple> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </div> <script src="lib/vue.js"></script> <script> var vm = new Vue({ el: #app, data: { value: , value: 1, value2: , value3: , value4: [], value5: , value6: [] } }) </script> ------------------------------------console------------------------------------------------ vm.value = 123

<div id="app"> <p>{{ content }}</p> <button v-on:click="content=abc">1</button> <button @click="content=abc">2</button> //common <button @click="fn">3</button> //common <button @click="fn(200, event)">3</button> </div> <script> new Vue({ el: #app, data: { content: 内容1, }, methods: { fn() { this.content = 33333333333; } fn2(value, event){ console.log(value, event); } } }) </script>

<div id="app"> <a @click.prevent="fn" href=https//:....>链接</a> <a @click.prevent href=https//:....>链接</a> </div> <script> new Vue({ el: #app, data: { }, methods: { fn() { console.log(这是a标签的点击事件); } } }) </script>

写文章草稿保存中…邀请预览发布------------------------------- install ---------------------------------------------------- <div id="app"> </div> <script src="lib/vue.js"></script> //三种选择方式 <script> //1 var vm = new Vue( el: #app ); //2 var vm = document.querySelector(#app); var vm = new Vue({ el:app }); //3 var vm = new Vue({}); vm.$mount(#app); console.log(vm.$el); </script>el不能是html,body元素,只能是单个元素一般用id插值表达式不能写在内容以外区域<div id="app"> <ul> <li>第一段内容{{ 12 > 3 ? "啊":"不" }}</li> <li id="{{ 1 + 2 }}"//这是错的,插值表达式不能写在id里>第一段内容{{ 12 > 3 ? "啊":"不" }}</li> <li>第三段内容{{ var num = 100;//这是错的,javascript不能写在内容里 }}</li> </ul> </div> <script src="lib/vue.js"></script> //三种选择方式 <script> //1 var vm = new Vue( el: #app ); //2 var vm = document.querySelector(#app); var vm = new Vue({ el:app }); //3 var vm = new Vue({}); vm.$mount(#app); console.log(vm.$el); </script>dataindex,length无法自动跟新试图 需要用Vue.set()<div id="app"> <ul> <li>{{ contentArr[0] }}</li> <li>{{ contentArr[1] }}</li> <li>{{ contentArr[2] }}</li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { contentArr: [内容1,内容2, 内容3] } }); </script> --------------------------------- console -------------------------------------------------- Vue.set(vm.contentArr, 0, new content); //vm.contentArr[0] = "new" 这个不work不会跟新视图 //vm.contentArr.length = 0; 这个不work不会清空视图 可以用vm.contentArr.pop()或vm.contentArr.push(插入新的内容);methods 存储函数<div id="app"> <ul> <li>{{ title1.split(-).join() }}</li> <li>{{ fn(title1) }}</li> <li>{{ contentArr[2] }}</li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { prefix: "result", title1 = a-b-c-d-e, title2 = x-y-z }, methods: { fn (value) { this.fn1(); this.fn2(); return this.prefix + value.split(-).join(); }, fn1(){ console.log(did 1); }, fn2(){ console.log(did 2); } } }); </script>指令 v-once//只生效一次 v-once <div id="app"> <ul> <li>{{ content }}</li> <li v-once>{{ content }}</li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { content = 内容文本 } }); </script> ----------------------------------------console------------------------------------------- vm.content = change// v-once不随这个改变v-text<div id="app"> <ul> <li> abc </li> <li v-text = "100"> def </li> <li v-text = "content"> ghi </li> <li v-html = "content1"> ghi </li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { content = 内容文本, content1 = <span>html不会生效，会原封不动的跟新到视图。需要绑定v-html到li</span> } }); </script> ----------------------------------------console------------------------------------------- vm.content = new// ghi 变 new属性绑定<div id="app"> <ul> <li> abc </li> <li v-bind = "100"> def </li> <li v-text = "content"> ghi </li> <li v-html = "content1"> ghi </li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { content = 内容文本, content1 = <span>html不会生效，会原封不动的跟新到视图。需要绑定v-html到li</span> } }); </script>v-bind 一次绑定多个属性。<div id="app"> <ul> <li> abc </li> <li v-bind = "100"> def </li> <li v-text = "content"> ghi </li> <li v-html = "content1"> ghi </li> <li :class="num+1+2"> ghi </li> <li :class="prefix + num"> ghi </li> <li :class="cls"> ghi </li> <li :class="bool ? cls1 : cls2"> ghi </li> </ul> </div> <script> var vm = new Vue({ el: #app, data: { attrObj: { id: box, title: title, class: clearFix, data-title: sdf } myTitle:mt, prefix: demo, num: 10, cls = q w e//多个类名设置，不常用 cls1: a, cls1: b } }); </script>class 绑定选择性绑定<p :class="{ x:isX, y:false, z: true}"></p> <script> var vm = new Vue({ el: #app, data: { isX: true, } }); </script>数组绑定<p :class="[a, classB, {c: isC}]"></p> <script> var vm = new Vue({ el: #app, data: { classB: b, isC: true, } }); </script> ------------------------------------------console------------------------------------- vm.isC = falsestyle绑定<p :style="styleObj"></p> <script> var vm = new Vue({ el: #app, data: { styleObj: { weight:200px, height:100px, backgroundColor: red, font-size: 30px } } }); </script>绑定基础样式和特别样式<p :style=[baseStyle, styleObj1]></p> <script> var vm = new Vue({ el: #app, data: { baseStyle: {}, styleObj1: { weight:200px, height:100px, backgroundColor: red, font-size: 30px } } }); </script>v-for:设置唯一key属性。<div id="app"> <ul> <li v-for="(item, index) in arr"> 内容为：{{ item }} 索引为:{{ index }} </li> //arr <li v-for="(value, key, index) in obj"> 内容为：{{ value }} 键为:{{ key }} </li> //obj </ul> <ul> <li v-for="(item, index) in 5"> 内容为：{{ item }}, {{ index }} </li> </ul> </div> <script> new Vue({ el: #app, data: { arr:[1, 2, 3], obj: { content1: 内容1, content2: 内容2, } } }); </script>设置key属性<div id="app"> <ul v-if="true"> <li v-for="item in arr" :key="item"> 输入框{{ item }}, <input type="text"></li> <li v-for="(item, index) in itemList" :key="item.id"> 输入框{{ item.value }}, <input type="text"></li> </ul> </div> <script> new Vue({ el: #app, data: { arr:[1, 2, 3], obj: { content1: 内容1, content2: 内容2, }, itemList: [ { id:1, value:1 }, { id:2, value:3 }, { id:3, value:3 } } }); </script> -------------------------------------console------------------------------------------------ vm.arr.reverse() //设置key为item，内容随着倒转，index不倒转 vm.itemList.reverse() //设置key为item.id，内容随着倒转template<div id="app"> <ul> <template v-for="item in obj"//template不设置key> {{ item }} <br> </template> </ul> </div> <script> new Vue({ el: #app, data: { arr:[1, 2, 3], obj: { content1: 内容1, content2: 内容2, } } }); </script>v-show 只是display:none v-if元素直接被移除<p v-if="bool">这是第一个p标签</p> <p v-else-if="bool">这是第二个p标签</p> <p v-else-if="bool">这是第三个p标签</p> <p v-else="bool">这是第四个p标签</p> <script> var vm = new Vue({ el: #app, data: { bool: false } }); </script>

<div id="app"> <p>{{ content }}</p> <button v-on:click="content=abc">1</button> <button @click="content=abc">2</button> //common <button @click="fn">3</button> //common <button @click="fn(200, event)">3</button> </div> <script> new Vue({ el: #app, data: { content: 内容1, }, methods: { fn() { this.content = 33333333333; } fn2(value, event){ console.log(value, event); } } }) </script>

<div id="app"> <p>{{ value }}</p> <p>单个复选框的值{{ value3 }}</p> <p>多个复选框的值{{ value4 }}</p> <input type="text" v-model="value"> <textarea v-model="value1"> <input type="radio" id="one" value="1" v-model="value2"> <label for="one">选项1</label> <input type="checkbox" value="选项内容" id="two" v-model="value3"> <label for="two">选项内容</label> <input type="checkbox" value="选项1" id="1" v-model="value4"> <label for="1">选项1</label> <input type="checkbox" value="选项2" id="2" v-model="value4"> <label for="2">选项2</label> <input type="checkbox" value="选项3" id="3" v-model="value4"> <label for="3">选项3</label> <p>{{ value5 }}</p> <select v-model="value5"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <p>{{ value6 }}</p> <select v-model="value6" multiple> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </div> <script src="lib/vue.js"></script> <script> var vm = new Vue({ el: #app, data: { value: , value: 1, value2: , value3: , value4: [], value5: , value6: [] } }) </script> ------------------------------------console------------------------------------------------ vm.value = 123选择框绑定

<div id="app"> <p>{{ content }}</p> <button v-on:click="content=abc">1</button> <button @click="content=abc">2</button> //common <button @click="fn">3</button> //common <button @click="fn(200, event)">3</button> </div> <script> new Vue({ el: #app, data: { content: 内容1, }, methods: { fn() { this.content = 33333333333; } fn2(value, event){ console.log(value, event); } } }) </script>

<div id="app"> <button @click.once="fn">按钮</a>//只会打印一次。。不管点多少次 <div> </div> <script> new Vue({ el: #app, data: { }, methods: { fn() { console.log(一次性的); } } }) </script>

<div id="app"> <a @click.prevent="fn" href=https//:....>链接</a> <a @click.prevent href=https//:....>链接</a> </div> <script> new Vue({ el: #app, data: { }, methods: { fn() { console.log(这是a标签的点击事件); } } }) </script>阻止冒泡给父元素d> <style> #app { width:100px; height:100px; border:1px solid grey; } </style> </head> <body> <div id="app" @click="fn"> <div> <button @click="fn1">按钮</a> <div> </div> <script> new Vue({ el: #app, data: { }, methods: { fn() { console.log(这是块); } fn1() { console.log(这是按钮); } } }) </script> </body>

<style> #app div { width:100px; height:100px; border:1px solid grey; } </style> </head> <body> <div id="app"> <div @click="fn"> <a @click.prevent.stop="fn1" href="#">按钮</a>//阻止父元素,阻止链接 <div> </div> <script> new Vue({ el: #app, data: { }, methods: { fn() { console.log(这是块); } fn1() { console.log(这是按钮); } } }) </script> </body>

<input type="text" @keyup.a="fn"> //keyup.65也可以 <input type="text" @keyup.esc="fn"> //enter,page-down,tab...... <input type="text" @keyup.a.b.c="fn"> //a或b或c都可以出发

<input type="text" @keyup.17.q="fn">//单独ctrl 或 q 触发 ...... fn1(event) { console.log(event); }

<input type="text" @keyup.ctrl.q="fn" v-model="value">//单独ctrl 或 q 触发 ...... <script> new Vue({ el: #app, data: { value: "" }, methods: { fn() { this.value = "" } } }) </script>

<button @click.left ="fn">sdf</button>

<div id="app"> <input type="text" v-model.trim="inputValue"> <p>{{ inputValue }}</p> </div> <script> new Vue({ el: #app, data: { }, methods: { var vm = new Vue( { el: #app, data: { inputValue: } }); </script>

<div id="app"> <input type="text" v-focus> </div> <div id="app1"> <input type="text" v-focus> //会聚焦到这里，光标只有一个 </div> <script> Vue.directive(focus, { inserted(el, binding) { console.log(binding); el.focus(); } } new Vue({ el: #app, data: { }, }); new Vue({ el: #app1, data: { }, }); </script>

new Vue({ el: #app1, data: { }, directives: { focus: { inserted (el) { el.focus(); } } } });

<div id="app"> <div v-bind:title="value | filterA"></div> <div>{{ value1 | filterA }}</div> </div> <script> Vue.filter(filterA, function(value){ return value.split(-).join(); }); new Vue({ el: #app, data: { value: a-b-c, value1: x-y-z } }); </script>