vue.js笔记（一）
001.hello world
1 <div id="app"> 2 {{msg}} 3 </div> 4 <script> 5 var vue = new Vue({ 6 el: "#app", 7 data: { 8 msg: "hello" 9 } 10 }) 11 </script>
002.v-for v-model v-on
1 <div id="app"> 2 <input v-model="iputVal"/> 3 <button @click="add">click</button> 4 <ul> 5 <li v-for="item of infos">{{item}}</li> 6 </ul> 7 </div> 8 <script> 9 var vm = new Vue({ 10 el: "#app", 11 data: { 12 infos: [], 13 iputVal: "" 14 }, 15 methods: { 16 add: function () { 17 this.infos.push(this.iputVal); 18 this.iputVal=""; 19 } 20 } 21 }) 22 </script>
003.全局组件
1 <div id="app"> 2 <input type="text" v-model="iputVal"> 3 <button @click="add">click</button> 4 <ul> 5 <todo :content="item" v-for="item of infos"></todo> 6 </ul> 7 </div> 8 <script> 9 Vue.component("todo", { 10 props: ["content"], 11 template: "<li>{{content}}</li>" 12 }); 13 var vm = new Vue({ 14 el: "#app", 15 data: { 16 infos: [], 17 iputVal:"" 18 }, 19 methods: { 20 add: function () { 21 this.infos.push(this.iputVal); 22 this.iputVal = ""; 23 } 24 } 25 }); 26 </script>
004.局部组件
1 <div id="app"> 2 <input v-model="iputVal"/> 3 <button @click="add">click</button> 4 <ul> 5 <todo :content="item" v-for="item of infos"></todo> 6 </ul> 7 </div> 8 <script> 9 var todo = { 10 props: ["content"], 11 template: "<li>{{content}}</li>" 12 } 13 var vm = new Vue({ 14 el: "#app", 15 components: { 16 todo: todo 17 }, 18 data: { 19 infos: [], 20 iputVal: "" 21 }, 22 methods: { 23 add: function () { 24 this.infos.push(this.iputVal); 25 this.iputVal = ""; 26 } 27 } 28 }); 29 </script>
005.组件之间的传值
1 <div id="app"> 2 <input v-model="iputVal"/> 3 <button @click="add">click</button> 4 <ul> 5 <todo :content="item" :index="key" v-for="(item,key) of infos" @delete="mdelete"></todo> 6 </ul> 7 </div> 8 <script> 9 var todo = { 10 props: ["content", "index"], 11 template: "<li @click='tdelete'>{{content}}--{{index}}</li>", 12 methods: { 13 tdelete: function () { 14 this.$emit("delete", this.index); 15 } 16 } 17 } 18 var vm = new Vue({ 19 el: "#app", 20 components: { 21 todo: todo 22 }, 23 data: { 24 infos: [], 25 iputVal: "" 26 }, 27 methods: { 28 add: function () { 29 this.infos.push(this.iputVal); 30 this.iputVal = ""; 31 }, 32 mdelete: function (index) { 33 this.infos.splice(index, 1); 34 // this.tableData.splice(this.tableData.findIndex(item => item.id === id), 1); 35 // console.log(this.tableData); 36 } 37 } 38 }); 39 </script>
006.模板语法
1 <div id="app"> 2 <div v-text="txt + ' ronle'"></div> 3 <input type="text" v-model="txt"/> 4 <div v-html="html + ' ronle'"></div> 5 </div> 6 <script> 7 var vm = new Vue({ 8 el: "#app", 9 data: { 10 txt: "welcome to china", 11 html: "<h3>welcome to china</h3>" 12 } 13 }) 14 </script>
007.计算属性和方法
1 <div id="app"> 2 <p>{{fullname}}</p> 3 <p>{{fullname1()}}</p> 4 </div> 5 <script> 6 var vm = new Vue({ 7 el: "#app", 8 data: { 9 one: "welcome", 10 two: "china", 11 }, 12 computed: { 13 fullname: function () { 14 return this.one + " " + this.two; 15 } 16 }, 17 methods: { 18 fullname1: function () { 19 return this.one + " " + this.two; 20 } 21 } 22 }); 23 </script>
008.侦听器
1 <div id="app"> 2 {{fullname}} 3 </div> 4 <script> 5 var vm = new Vue({ 6 el: "#app", 7 data: { 8 one: "welcome", 9 two: "china", 10 fullname: "welcome china" 11 }, 12 watch: { 13 one: function () { 14 console.log("one改变了"); 15 this.fullname = this.one + " " + this.two; 16 }, 17 two: function () { 18 console.log("two改变了"); 19 this.fullname = this.one + " " + this.two; 20 } 21 } 22 }); 23 </script>
009.get set
1 <div id="app"> 2 {{fullname}} 3 </div> 4 <script> 5 var vm = new Vue({ 6 el: "#app", 7 data: { 8 one: "welcome", 9 two: "china" 10 }, 11 computed: { 12 fullname: { 13 get: function () { 14 return this.one + " " + this.two; 15 }, 16 set: function (value) { 17 var arr = value.split(" ") 18 this.one = arr[0]; 19 this.two = arr[1]; 20 } 21 } 22 } 23 }); 24 </script>
010.样式绑定
1 <div id="app"> 2 <h3 :class="{red:isred}" @click="change">welcome</h3> 3 <h3 :class="[blue]" @click="chang2">china</h3> 4 5 <h3 :style="fonts">welcome</h3> 6 <h3 :style="[fonts,{color:'brown'}]">china</h3> 7 </div> 8 <script> 9 var vm = new Vue({ 10 el: "#app", 11 data: { 12 isred: true, 13 blue: "blue", 14 fonts: { 15 fontSize: "36px" 16 } 17 }, 18 methods: { 19 change: function () { 20 this.isred = !this.isred; 21 }, 22 chang2: function () { 23 this.blue = this.blue === "blue" ? "red" : "blue"; 24 } 25 } 26 }); 27 </script>
011.条件渲染
1 <div id="app"> 2 <div v-if="isshow=='a'"> 3 welcome 4 </div> 5 <div v-else-if="isshow=='b'"> 6 to 7 </div> 8 <div v-else> 9 china 10 </div> 11 12 <div v-show="isvisible"> 13 hello world 14 </div> 15 <div v-if="isvisible"> 16 hello world 17 </div> 18 </div> 19 <script> 20 var vm = new Vue({ 21 el: "#app", 22 data: { 23 isvisible: true, 24 isshow: "a" 25 } 26 }); 27 </script>
012.列表渲染-数组
1 <div id="app"> 2 <p v-for="(item,key) of infos" :key="item.id"> 3 {{item.name}} -- {{item.id}} 4 </p> 5 <template v-for="(item,key) of arr"> 6 <div>{{key}} --- {{item}}</div> 7 </template> 8 </div> 9 <script> 10 var vm = new Vue({ 11 el: "#app", 12 data: { 13 infos: [ 14 { 15 id: 9001, 16 name: "ronle", 17 age: 20 18 }, 19 { 20 id: 9002, 21 name: "cheng", 22 age: 30 23 } 24 ], 25 arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] 26 } 27 }); 28 </script>
013.列表渲染-对象
1 <div id="app"> 2 <template v-for="(item,key,index) of list"> 3 <div> {{index}} -- {{key}} -- {{item}}</div> 4 </template> 5 </div> 6 <script> 7 var vm = new Vue({ 8 el: "#app", 9 data: { 10 list: { 11 id: 90001, 12 name: "ronle", 13 age: 99 14 } 15 } 16 }); 17 </script>
014.set方法
1 <div id="app"> 2 <p v-for="(item,key,index) of infos"> 3 {{index}} --- {{key}} --- {{item}} 4 </p> 5 <p v-for="(item,key) of arr"> 6 {{key}} -- {{item}} 7 </p> 8 <button @click="changer">改变对象</button> 9 </div> 10 <script> 11 var vm = new Vue({ 12 el: "#app", 13 data: { 14 infos: { 15 id: 1, 16 name: "ronle" 17 }, 18 arr: [ 19 1, 2, 3, 4, 5 20 ] 21 }, 22 methods: { 23 changer: function () { 24 //改变一项 25 Vue.set(this.infos, "id", "100") 26 //增加一项 27 Vue.set(this.infos, "nick", "beyond") 28 29 vm.$set(this.arr,"1","77") 30 } 31 } 32 }); 33 </script>
015.标准组件的写法
1 <div id="app"> 2 <table> 3 <tr is="row" :content="item" v-for="item of arr"></tr> 4 </table> 5 </div> 6 <script> 7 var row = { 8 props: ["content"], 9 template: "<tr><td>{{content}}</td></tr>" 10 } 11 var vm = new Vue({ 12 el: "#app", 13 components: { 14 row: row 15 }, 16 data: { 17 arr: [1, 2, 3, 4, 5, 6] 18 } 19 }); 20 </script>
016.ref传值
1 <div id="app"> 2 <count ref="one" :count="0" @change="inc"></count> 3 <count ref="two" :count="0" @change="inc"></count> 4 <div>{{total}}</div> 5 </div> 6 <script> 7 var count = { 8 props: ["count"], 9 data: function () { 10 return { 11 number: this.count 12 } 13 }, 14 template: "<div @click='add'>{{number}}</div>", 15 methods: { 16 add: function () { 17 this.number++; 18 this.$emit("change", 1); 19 } 20 } 21 } 22 var vm = new Vue({ 23 el: "#app", 24 components: { 25 count: count 26 }, 27 data: { 28 total: 0 29 }, 30 methods: { 31 inc: function () { 32 this.total = this.$refs.one.number + this.$refs.two.number; 33 } 34 } 35 }); 36 </script>
017.组件参数校验与非props特性
1 <div id="app"> 2 <child></child> 3 </div> 4 <script> 5 Vue.component("child", { 6 props: { 7 content: { 8 //必须传入一个string类型 9 type: String, 10 //是否必须传入的一项 11 required: false, 12 //默认值 13 default: "hello world", 14 //自定义验证规则 15 validator: function (value) { 16 return value.length > 5; 17 } 18 } 19 }, 20 template: "<div>{{content}}</div>" 21 }) 22 var vm = new Vue({ 23 el: "#app", 24 data: {} 25 }); 26 </script>
018.组件原生事件
1 <div id="app"> 2 <child @click.native="myclick"></child> 3 </div> 4 <script> 5 Vue.component("child", { 6 template: "<div>hello</div>", 7 }) 8 var vm = new Vue({ 9 el: "#app", 10 data: {}, 11 methods: { 12 myclick: function () { 13 alert("click"); 14 } 15 } 16 }); 17 </script>
019.非父子组件的传值（观察者模式）
1 <div id="app"> 2 <child content="welcome"></child> 3 <child content="china"></child> 4 </div> 5 <script> 6 Vue.prototype.bus = new Vue(); 7 Vue.component("child", { 8 data: function () { 9 return { 10 selfContent: this.content 11 } 12 }, 13 props: { 14 content: String 15 }, 16 template: "<div @click='thisClick'>{{selfContent}}</div>", 17 methods: { 18 thisClick: function () { 19 this.bus.$emit("change", this.selfContent); 20 } 21 }, 22 mounted: function () { 23 var that = this; 24 this.bus.$on("change", function (msg) { 25 that.selfContent = msg; 26 }) 27 } 28 }); 29 var vm = new Vue({ 30 el: "#app" 31 }); 32 </script>
020.slot具名插槽
1 <div id="app"> 2 <child> 3 <div class="header" slot="header">header</div> 4 <div class="footer" slot="footer">footer</div> 5 </child> 6 </div> 7 <script> 8 Vue.component("child", { 9 template: '<div>' + 10 '<slot name="header"></slot>' + 11 '<div class="content">content</div>' + 12 '<slot name="footer"></slot>' + 13 '</div>' 14 }); 15 var vm = new Vue({ 16 el: "#app" 17 }); 18 </script>
021.作用域插槽
1 <div id="app"> 2 <child> 3 <template slot-scope="props"> 4 <li>{{props.item}}</li> 5 </template> 6 </child> 7 </div> 8 <script> 9 Vue.component("child", { 10 data: function () { 11 return { 12 list: [1, 2, 3, 4, 5, 6, 7] 13 } 14 }, 15 template: "<ul><slot v-for='item of list' :item='item'></slot></ul>" 16 }); 17 new Vue({ 18 el: "#app" 19 }) 20 </script>
022.v-once
1 <div id="app"> 2 <child-one v-if="type=='child-one'"></child-one> 3 <child-two v-if="type=='child-two'"></child-two> 4 <button @click="click">点击</button> 5 </div> 6 <script> 7 Vue.component("child-one", { 8 template: "<div v-once>one</div>" 9 }); 10 Vue.component("child-two", { 11 template: "<div v-once>two</div>" 12 }); 13 new Vue({ 14 el: '#app', 15 data: { 16 type: "child-one" 17 }, 18 methods: { 19 click: function () { 20 this.type = this.type === "child-one" ? "child-two" : "child-one"; 21 } 22 } 23 }); 24 </script>
023.动态组件
1 <div id="app"> 2 <component :is="type"></component> 3 <button @click="click">点击</button> 4 </div> 5 <script> 6 Vue.component("child-one", { 7 template: "<div v-once>one</div>" 8 }); 9 Vue.component("child-two", { 10 template: "<div v-once>two</div>" 11 }); 12 new Vue({ 13 el: "#app", 14 data:{ 15 type:"child-one" 16 }, 17 methods: { 18 click: function () { 19 this.type = this.type === "child-one" ? "child-two" : "child-one"; 20 } 21 } 22 }); 23 </script>
