mvvm
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_HelloWorld</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 1. 引入Vue.js 2. 创建Vue对象 el : 指定根element(选择器) data : 初始化数据(页面可以访问) 3. 双向数据绑定 : v-model 4. 显示数据 : {{xxx}} 5. 理解vue的mvvm实现 model 模型，数据对象（data） view： 视图，模板页面 viewModel 视图模型，Vue的实例，vm --> <!--模板--> <div id="test"> <input type="text" v-model="msg"><br><!--指令--> <input type="text" v-model="msg"><!--指令--> <p>hello {{msg}}</p><!--大括号表达式--> </div> <script type="text/javascript"> const vm = new Vue({ // 配置对象 options // 配置选项(option) el: '#test', // element: 指定用vue来管理页面中的哪个标签区域 data: { msg: 'atguigu' } }) </script> </body> </html>
模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_模板语法</title> </head> <body> <!-- 1. 模板的理解: 动态的html页面 包含了一些JS语法代码 大括号表达式 指令(以v-开头的自定义标签属性) 2. 双大括号表达式 语法: {{exp}} 或 {{{exp}}} 功能: 向页面输出数据 可以调用对象的方法 3. 指令一: 强制数据绑定 功能: 指定变化的属性值 完整写法: v-bind:xxx='yyy' //yyy会作为表达式解析执行 简洁写法: :xxx='yyy' 4. 指令二: 绑定事件监听 功能: 绑定指定事件名的回调函数 完整写法: v-on:click='xxx' 简洁写法: @click='xxx' --> <div id="app"> <h2>1. 双大括号表达式</h2> <p>{{content}}</p><!--textContent--> <p>{{content.toUpperCase()}}</p> <p v-text="msg"></p><!--textContent--> <p v-html="msg"></p><!--innerHTML--> <h2>2. 指令一: 强制数据绑定</h2> <img src="imgurl"></br> <img v-bind:src="imgurl"></br> <img :src="imgurl"></br> <a href="url">访问指定站点</a><br> <a v-bind:href="url">访问指定站点2</a><br> <a :href="url">访问指定站点2</a><br> <h2>3. 指令二: 绑定事件监听</h2> <button v-on:click="test">点我</button> <button @click="test2('haha')">点我</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { content: 'NBA I Love This Game', url: 'http://www.atguigu.com', msg: '<a href="http://www.atguigu.com">i will back</a>', imgurl: "../image/无标题.png" }, methods: { test () { alert('好啊!!!') }, test2(content){ alert(content) } } }) </script> </body> </html>
计算属性和监视
回调函数
1.你定义了 2.你没调用 3.但最终它执行了
什么时候调用，用来干什么
回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03_计算属性和监视</title> </head> <body> <!-- 1. 计算属性 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2. 监视属性: 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时, 回调函数自动调用, 在函数内部进行计算 3. 计算属性高级: 通过getter/setter实现对属性数据的显示和监视 计算属性存在缓存, 多次读取只执行一次getter计算 --> <div id="demo"> 姓: <input type="text" placeholder="First Name" v-model="firstName"><br> 名: <input type="text" placeholder="Last Name" v-model="lastName"><br> <!--fullName1是根据fistName和lastName计算产生--> 姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br> 姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br> 姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br> <p>{{fullName3}}</p> <p>{{fullName3}}</p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el: '#demo', data: { firstName: 'A', lastName: 'B', fullName2: 'A-B' }, // 计算属性配置: 值为对象 computed: { fullName1 () { // 属性的get() console.log('fullName1()', this) return this.firstName + '-' + this.lastName }, fullName3: { // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值 //1.你定义了 2.你没调用 3.但最终它执行了 //什么时候调用，用来干什么 //回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性值 get () { console.log('fullName3 get()') return this.firstName + '-' + this.lastName }, // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值 //回调函数，当属性值发生改变的时候回调，更新相关的属性数据 set (value) {// fullName3的最新value值 A-B23 console.log('fullName3 set()', value) // 更新firstName和lastName const names = value.split('-') this.firstName = names[0] this.lastName = names[1] } } }, watch: { // 配置监视firstName firstName: function (value) { // 相当于属性的set console.log('watch firstName', value) // 更新fullName2 this.fullName2 = value + '-' + this.lastName }, lastName: function(value){ this.fullName2=this.firstName+"-"+value }, } }) // // 监视lastName // vm.$watch('lastName', function (value) { // console.log('$watch lastName', value) // // 更新fullName2 // this.fullName2 = this.firstName + '-' + value // }) </script> </body> </html>
class与style绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04_class与style绑定</title> <style> .classA { color: red; } .classB { background: blue; } .classC { font-size: 20px; } </style> </head> <body> <!-- 1. 理解 在应用界面中, 某个(些)元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术 2. class绑定: :class='xxx' xxx是字符串 xxx是对象 xxx是数组 3. style绑定 :style="{ color: activeColor, fontSize: fontSize + 'px' }" 其中activeColor/fontSize是data属性 --> <div id="demo"> <h2>1. class绑定: :class='xxx'</h2> <p :class="myClass">xxx是字符串</p> <p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p> <p :class="['classA', 'classB']">xxx是数组</p> <h2>2. style绑定</h2> <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p> <p :class="{classA:hasClassA,classB:hasClassB,classC:hasClassC}">xxx是对象2</p> <button @click="update">更新</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { myClass: 'classA', hasClassA: true, hasClassB: false, hasClassC:true, activeColor: 'red', fontSize: '20px' }, methods: { update () { this.myClass = 'classB' this.hasClassA = !this.hasClassA this.hasClassB = !this.hasClassB this.hasClassC=!this.hasClassC this.activeColor = 'yellow' this.fontSize = '30px' } } }) </script> </body> </html>
条件渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08_条件渲染</title> </head> <body> <!-- 1. 条件渲染指令 v-if v-else v-show 2. 比较v-if与v-show 如果需要频繁切换 v-show 较好 --> <div id="demo"> <p v-if="ok">表白成功</p> <p v-else>表白失败</p> <hr> <p v-show="ok">求婚成功</p> <p v-show="!ok">求婚失败</p> <button @click="okFunction">切换</button> <!--<button @click="ok=!ok">切换</button>--> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { ok: true, }, methods:{ okFunction(){ this.ok=!this.ok } } }) </script> </body> </html>
列表渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06_列表渲染</title> </head> <body> <!-- 1. 列表显示 数组: v-for / index 对象: v-for / key 2. 列表的更新显示 删除item 替换item --> <div id="demo"> <h2>测试: v-for 遍历数组</h2> <input type="text" v-model="searchName"> <ul> <li v-for="(p, index) in filterPersions" :key="index"> {{index}}--{{p.name}}--{{p.age}} --<button @click="deleteP(index)">删除</button> --<button @click="updateP(index, {name:'Cat', age: 16})">更新</button> --<button @click="addP(index,{name: 'xfzhang', age: 18})">添加</button> </li> </ul> <button @click="addP1({name: 'xfzhang', age: 18})">添加</button> <div> <button @click="setOrderType(2)">年龄升序</button> <button @click="setOrderType(1)">年龄降序</button> <button @click="setOrderType(0)">原本顺序</button> </div> <h2>测试: v-for 遍历对象</h2> <ul> <li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li> </ul> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { searchName: '', orderType: 0, // 0代表不排序, 1代表降序, 2代表升序 persons: [ {name: 'Tom', age:18}, {name: 'Jack', age:17}, {name: 'Bob', age:19}, {name: 'Mary', age:16} ] }, methods: { deleteP (index) { this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法 // 1. 调用原生的数组的对应方法 // 2. 更新界面 }, updateP (index, newP) { console.log('updateP', index, newP) // this.persons[index] = newP // vue根本就不知道 this.persons.splice(index, 1, newP) // this.persons = [] }, addP (index,newP) { this.persons.splice(index,0,newP) }, addP1(newP){ this.persons.push(newP) }, setOrderType (orderType) { this.orderType = orderType } }, computed:{ filterPersions(){ // 取出相关数据 const {searchName, persons, orderType} = this let arr = [...persons] // 过滤数组 if(searchName.trim()) { arr = persons.filter(p => p.name.indexOf(searchName)!==-1) } // 排序 if(orderType) { arr.sort(function (p1, p2) { if(orderType===1) { // 降序 return p2.age-p1.age } else { // 升序 return p1.age-p2.age } }) } return arr } } }) </script> </body> </html>
4218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
