vue的指令
6.循环指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环指令</title> </head> <body> <div id="app"> <ul> <li v-for="s in arr">{{ s }}</li> <!-- 1.列表循环指令: v-for="ele in 容器变量" --> </ul> <hr> <ul> <li v-for="(s, i) in arr" :key="s" b="b">第{{ i }}个：{{ s }}</li> <!--key属性是vue的属性，表示为该标签在内存中建立缓存的依据--> </ul> <!--:key把s变成变量，代表唯一性--> <!-- s是列表的值，i是列表的索引--> <ul> <li v-for="v in person">{{ v }}</li> </ul> <ul> <li v-for="(v, k, i) in person">{{ k }}:{{ v }}:{{ i }}</li> <!-- 2.字典循环指令: v-for="ele in 容器变量" --> </ul> <!-- v是字典的值，k是字典的键，i是字典的索引--> <hr> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { arr: ['aaa', 'bbb', 'ccc'], person: { 'name': 'Bob', 'age': 18, 'sex': '男' } }) </script> </html>
前台数据库
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>前台数据库</title> </head> <body> <h1>前台数据库</h1> </body> <script> window.localStorage // 永久存储仓库 window.sessionStorage // 临时存储仓库 localStorage['name'] = 'Owen' // 存 console.log(localStorage.name); // 取 sessionStorage.age = 18; // 存，存完注释 console.log(sessionStorage['age']); // 取 localStorage.clear(); // 清空 localStorage.clear(); </script> </html>
差值表达式符号的修改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>符号修改</title> </head> <body> <div id="app"> <p>{{ msg }}</p> <!--Django支持的格式--> <p>${ msg }</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '信息' }, delimiters: ['${', '}'], <!--差值表达式支持的格式--> }) </script> </html>
计算属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>监听多个变量</title> </head> <body> <div id="app"> <input type="text" v-model="a_val"> <input type="text" v-model="b_val"> <input type="text" v-model="c_val"> <p> {{ val_fn }} </p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { a_val: '', b_val: '', c_val: '', }, computed: { // computed:用来解决一个变量值依赖一个或多个变量值 val_fn () { // val_fn, 可以直接作为变量被渲染，值为方法的返回值 // this.a_val; // this.b_val; // this.c_val; return this.a_val + this.b_val + this.c_val; //在方法名被渲染后,方法内部的所有变量都会被监听 } } }) </script> </html>
监听属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>监听属性</title> </head> <body> <div id="app"> <p> 姓名：<input type="text" v-model="full_name"> </p> <p> 姓：<input type="text" v-model="last_name"> </p> <p> 名：<input type="text" v-model="first_name"> </p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { full_name: '', last_name: '', first_name: '', }, watch: { // watch：管理 监听绑定的属性(提前要存在) 的方法，用来解决多个变量值依赖一个变量值 full_name () { // full_name, 被监听的变量名(属性) let name = this.full_name.split(' '); // 在方法名被渲染后，方法名代表的属性值改变，绑定的方法就会被调用,如下 this.last_name = name[0]; this.first_name = name[1]; } } }) </script> </html>
根组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1 id="app"> {{ msg }} </h1> <div id="main"> {{ msg }} </div> </body> <script src="js/vue.js"></script> <script> let app = new Vue({ // 1、new Vue创建的是vue实例，一个实例就是一个vue组件，new出了的实例称之为根组件 // 注：在实际开发中一个页面只有一个根组件 el: '#app', // 注：挂载点是必须的(作为虚拟DOM渲染替换的依据)，挂载点可以读取，作为根组件的模板 data: { msg: 'app的msg', c: 'red' }, template: `<h1 id="app" :style="{color: c}" @click="action"> // 2、每个组件均由 html模板 css样式 js逻辑 组成 {{ msg }} // html模板:通过template使用，但根组件的模板就采用挂载点即可，无需创建自身template，也就是html已经写好了 </h1> `, // 3、根组件内部可以注册使用n个子组件，但子组件必须拥有自己的 html模板 css样式 js逻辑 methods: { action () { alert(this.msg) } } }); let main = new Vue({ el: '#main', data: { msg: 'main的msg' } }); // 知识点：利用原生js完成两个组件的交互 // 获取组件的数据 // console.log(app.msg); // 修改组件的数据 // app.msg = '12345'; main.msg = app.msg; </script> </html>
局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>局部组件</title> <style> .box { width: 200px; text-align: center; border: 1px solid black; border-radius: 10px; overflow: hidden; float: left; } .box img { width: 100%; } .box p { margin: 0; } .box span:hover { cursor: pointer; color: orange; } </style> </head> <body> <div id="app"> <box-tag></box-tag> <box-tag></box-tag> </div> </body> <script src="js/vue.js"></script> <script> let box = { template: ` <div class="box"> <img src="img/001.jpg" alt=""> <p> <span @click="btnClick">点击了{{ num }}下</span> <p>野兽</p> </p> </div> `, data () { // 每个复用的子组件都应该有自己的一套数据，所以要用一个局部作用域存储，保证数据的隔离性 return { // data的值还是字典，所以函数的返回值是字典即可 num: 0 } }, methods: { btnClick () { //方法可以共用 this.num += 1; } } }; new Vue({ el: '#app', components: { //注册局部组件 box, // key与value变量同名,也可以简写 boxTag: box, // js支持的驼峰命名法与html的-连接有语法对应 }, data: { box_data: data } }) </script> </html>
全局组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全局组件</title> </head> <body> <div id="app"> <g-tag></g-tag> <g-tag></g-tag> </div> </body> <script src="js/vue.js"></script> <script> Vue.component('gTag', { // 全局组件，通过 Vue.component('组件名', {组件对象主体})，就相当于Vue自带的模块; template: ` <p> <span @click="action">{{ num }}</span> </p> `, data () { return { num: 0 } }, methods: { action() { this.num++; } } } ); new Vue({ el: '#app', components: { } }) </script> </html>
数据父传子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>父传子</title> </head> <body> <div id="app"> <sub-tag :a="msg"></sub-tag> <!--1）父组件模板中写子组件标签,msg变量由父级提供 --> <!--2）父组件的数据绑定给子组件标签的自定义属性，也就是:a --> </div> </body> <script src="js/vue.js"></script> <script> let subTag = { props: ['a'], <!--3）在子组件内部通过props拿到自定义属性 --> template: ` <div> <h1>{{ a }}</h1> <!--4）使用自定义属性就可以获得父组件的数据 --> </div> ` }; new Vue({ el: '#app', data: { msg: '父级数据' }, components: { subTag, } }) </script> </html>
数据子传父
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <sub-tag @send_val="recv_val"></sub-tag> </div> </body> <script src="js/vue.js"></script> <script> let subTag = { template: ` <div> <input type="text" v-model="val"> <button @click="changeTitle">修改</button> <!--1）触发子组件事件 --> </div> `, data () { return { val: '' } }, methods: { changeTitle () { this.$emit('send_val', this.val); <!--2）子组件事件通过$emit，将数据传到子组件事件@send_val中 --> } } }; new Vue({ el: '#app', components: { subTag }, methods: { recv_val (val) { <!--3）父组件通过recv_val事件(变量)来接收数据 --> aloct(val) } } }) </script> </html>