head <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script> <style> .active { color: skyblue; } .text-danger { color: red; } div { font-size: 14px; font-weight: normal; color: grey; } .title { font-size: 22px; font-weight: bolder; color: skyblue; } </style> </head> 实例1: <div id="app1"> <div class="title">(1) app1 插值表达式</div> {{message}} </div> var app = new Vue({ el: "#app1", data: { message: 'hello vue' } }) 实例2: <div id="app2"> <div class="title">(2) app2 v-bind</div> <span v-bind:title="message">鼠标悬停几秒看效果</span> </div> var app2 = new Vue({ el: "#app2", data: { message: '页面加载于 ' + new Date().toLocaleString() } }) 实例3: <div id="app3"> <div class="title">(3) app3 v-if</div> <p v-if="seen">现在你看到我了</p> </div> var app3 = new Vue({ el: "#app3", data: { seen: true } }) 实例4: <div id="app4"> <div class="title">(4) app4 v-for</div> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> var app4 = new Vue({ el: "#app4", data: { todos: [ { id: 1, text: '学习js' }, { id: 2, text: '学习vue' }, { id: 3, text: '学习node' }, ] } }) 实例5: <div id="app5"> <div class="title">(5) app5 v-on:click</div> <p>{{message}}</p> <button v-on:click="reverseMessage">逆转消息</button> </div> var app5 = new Vue({ el: '#app5', data: { message: 'hello vue' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) 实例6: <div id="app6"> <div class="title">(6) app6-双向数据绑定</div> <p>{{message}}</p> <input v-model="message"> </div> var app6 = new Vue({ el: '#app6', data: { message: 'klll dss' } }) 实例7: <div id="app7"> <div class="title">(7) app7-v-html-组件-绑定class对象</div> <div v-bind:class="{active:isActive}">1样式测试-绑定的数据对象定义在模板里</div> <div v-bind:class="classObj">2样式测试-绑定的数据对象定义在data中</div> <div v-bind:class="classObj1">3样式测试-绑定的数据对象是一个返回对象的计算属性</div> <div v-bind:class="[activeClass,errorClass]">4样式测试-把数组传给v-bind:class以应用一个class列表</div> <div v-bind:class="[isActive?activeClass:'',errorClass]">5样式测试-根据条件切换列表中的class</div> <div v-bind:class="[{active:isActive},errorClass]">6样式测试-根据条件切换列表中的class-数组语法中可以使用对象语法简单</div> <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">7样式测试-绑定内联样式-对象语法</div> <div v-bind:style="styleObject">8样式测试-绑定内联样式对象</div> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ol> <p>Using mustaches: {{ rawHtml }}</p> <!-- v-html把其当成html进行解析,span内容将会替换成属性值rawHtml,直接作为html,忽略解析属性值中的数据绑定 --> <p>Using v-html directive: <span v-html="rawHtml"></span></p> </div> // 全局注册组件,app7内的地方都可以引用 Vue.component('todo-item', { props: ['todo'], template: `<li v-bind:id="todo.id">{{todo.text}}</li>` }) var app7 = new Vue({ el: '#app7', data: { groceryList: [ { id: 2, text: '蔬菜' }, { id: 3, text: '奶酪' }, { id: 4, text: '随便时代开始的但是' } ], rawHtml: "<span style='color:red'>this should be red</span>", isActive: true, classObj: { active: false, 'text-danger': true }, isActive: true, error: null, activeClass: 'active', errorClass: 'text-danger', activeColor: 'red', fontSize: 30, styleObject: { color: 'red', fontSize: '21px' } }, computed: { classObj1: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } }) 实例8: <!-- 计算属性 --> <div id="app8"> <div class="title">(8) app8-计算属性</div> <p>Original msg:"{{message}}"</p> <p>Computed reversed message:"{{reverseMessage}}"</p> </div> var app8 = new Vue({ el: '#app8', data: { message: 'ddd fff' }, computed: { // 计算属性的getter reverseMessage: function () { return this.message.split('').reverse().join('') } } }) 实例9: <div id="app9"> <div class="title">(9) app9-watch</div> {{fullName}} </div> var app9 = new Vue({ el: '#app9', data: { fName: 'ff', lName: 'll', // fullName:'ff ll' }, // 可以选择watch监听可以选择computed计算属性,推荐计算属性 computed: { fullName: function () { return this.fName + ' ' + this.lName } }, watch: { fName: function (val) { this.fullName = val + ' ' + this.lastName }, lName: function (val) { this.fullName = this.fName + ' ' + val } } }) 实例10: <div id="app10"> <div class="title">(10) app10-setter</div> {{fullNames}} </div> var app10 = new Vue({ el: '#app10', data: { fNames: 'ff', lNames: 'll', // fullNames:'ff ll' }, // 可以选择watch监听可以选择computed计算属性,推荐计算属性 computed: { fullNames: { get: function () { return this.fNames + ' ' + this.lNames }, set: function (newValue) { var names = newValue.split(' '); this.fNames = name[0]; this.lNames = names[names.length - 1]; } } } }) 实例11: <div id="app11"> <div class="title">(11) app11-watch</div> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p> </div> var app11 = new Vue({ el: '#app11', data: { question: '', answer: 'i cannot give you an answer until you ask a question' }, watch: { question: function (newQuestion, oldQuestion) { this.answer = 'waiting for you to stop typing...' this.debouncedGetAnser() } }, created() { this.debouncedGetAnser = _.debounce(this.getAnswer, 500) }, methods: { getAnswer: function () { if (this.question.indexOf('?') === -1) { this.answer = 'Questions usually contain a question mark. ;-)' return } this.answer = 'thisingk...' var vm = this axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer) }) .catch(function (error) { vm.answer = 'error ' + error }) } } }) 实例12: <div id="app12"> <div class="title">(12) app12-v-for</div> <ul> <li v-for="item in items"> {{item.msg}} </li> </ul> <ul> <!-- 唯一key --> <li v-for="(item,index) in itemss" v-bind:key="index">{{parentMsg}} - {{index}} - {{item.msg}} </li> </ul> <div>计算属性computed-数组过滤或排序后的结果</div> <ul> <li v-for="n in evenNumbers">{{n}}</li> </ul> <div>methods-数组过滤或排序后的结果</div> <ul> <li v-for="n in even(numbers)">{{n}}</li> </ul> <div>将只渲染未完成的todo</div> <ul> <li v-for="todo in todos" v-if="!todo.isComplete"> {{todo}} </li> </ul> </div> var app12 = new Vue({ el: '#app12', data: { items: [ { msg: 'fj' }, { msg: 'fdss' } ], parentMsg: 'parent', itemss: [ { msg: 'dssd' }, { msg: 'dsdsde' } ], numbers: [1, 2, 3, 4, 5], todos: [ { isComplete: true, value: '12' }, { isComplete: false, value: '22' }, { isComplete: false, value: '33' } ] }, computed: { evenNumbers: function () { // filter过滤出能被2整除的元素 return this.numbers.filter(function (number) { return number % 2 === 0 }) } }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } }) 实例13: <div id="app13"> <div class="title">(13) app12-v-for-todo</div> <form v-on:submit.prevent="addNewTodo"> <label>Add a todo</label> <input v-model="newTodoText" id="new-todo" placeholder="E.G. Feed the cat"> <button>Add</button> </form> <ul> <li is="todo-item" v-for="(todo,index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index,1)"></li> </ul> </div> Vue.component('todo-item', { template: ` <li>\ {{title}}\ <button v-on:click="$emit(\'remove\')">Remove</button>\ </li>\ `, props: ['title'] }) var app13 = new Vue({ el: '#app13', data: { newTodoText: '', todos: [ { id: 1, title: 'Do the dishes', }, { id: 2, title: 'Take out the trash', }, { id: 3, title: 'Mow the lawn' } ], nextTodoId:4 }, methods:{ addNewTodo:function(){ this.todos.push({ id:this.nextTodoId++, title:this.newTodoText }) this.newTodoText = '' } } })