Vue常用指令和语法基础
一、模板语法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>模板语法</title><script src="../0907/module/vue.js"></script></head><body><div class="app"><p>{{words}}</p><!-- v-:Vue指令的前缀，以html自定义属性的方式书写 --><p v-html="code"></p><p>{{10*30}}</p><p>{{true ? '高兴' : '快乐'}}</p><p>{{"支持字面量"}}</p></div><script>const vm = new Vue({el: ".app",data: {words: "Hello php.cn",code: "<strong>朱老师</strong>",},});</script></body></html>
二、计算属性和过滤器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>计算属性和过滤器</title><script src="../0907/module/vue.js"></script></head><body><div class="app"><!--split() 方法用于把一个字符串分割成字符串数组("")为空的话每个字符之间都会被分割reverse() 方法用于颠倒数组中元素的顺序join() 方法用于把数组中的所有元素放入一个字符串--><p>{{reverseWords}}</p><!--| :管道符--><p>{{words | wordsToCase}}</p><p>{{words | substring}}</p></div><script>const vm = new Vue({el: ".app",data: {words: "Hello PHP",},//计算属性computed: {reverseWords() {return this.words.split("").reverse().join("");},},//过滤器属性filters: {wordsToCase(str) {return str.toUpperCase();},substring: (str) => str.substr(2, 3),},});</script></body></html>
三、侦听器属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>侦听器属性</title><script src="../0907/module/vue.js"></script></head><body><p>小小加法器</p><div class="app"><input type="number" v-model="add1" />+<input type="number" v-model="add2" /> = {{res}}</div><script>const vm = new Vue({el: ".app",data: {add1: 0,add2: 0,res: 0,},//只能侦听到data中的方法//侦听器属性/* watch: {add1: function (newVal, oldVal) {console.log("new = %d,old = %d",parseFloat(newVal),parseFloat(oldVal));this.res = this.newVal * 1 + this.oldVal * 1;},add2: function (newVal, oldVal) {this.res = this.newVal * 1 + this.oldVal * 1;},}, *///公共方法methods: {//事件方法或公共函数add(newVal, oldVal) {this.res = this.newVal * 1 + this.oldVal * 1;},},watch: {add1(newVal) {this.add(newVal, this.add2);},add2(newVal) {this.add(newVal, this.add1);},},});</script></body></html>
四、计算属性来实现小小加法器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>侦听器属性2</title><script src="../0907/module/vue.js"></script></head><body><p>小小加法器</p><div class="app"><input type="number" v-model="add1" />+<input type="number" v-model="add2" /> = <span>{{res}}</span></div><script>const vm = new Vue({el: ".app",data: {add1: 0,add2: 0,},computed: {res() {return this.add1 * 1 + this.add2 * 1;},},});</script></body></html>
五、样式的修改
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>样式的修改</title><style>.active {color: red;}.bigger {font-size: 1.5rem;}.violet {color: blueviolet;}</style><script src="../0907/module/vue.js"></script></head><body><div class="app"><!-- <p class="active">hello world</p> --><!-- <p v-bind:class="{active:isActive,bigger:isBigger}">hello world</p> --><!-- <p v-bind:class="style1">hello world</p> --><!-- <p v-bind:class="[active,bigger]">hello world</p> --><!-- <p style="color: red">hello world</p> --><!-- <p v-bind:style="'color:violet;font-size:2rem'">hello world</p> --><!-- <p v-bind:style="`color:violet;font-size:2rem`">hello world</p> --><p v-bind:style="{color:color,fontSize:fontSize}">hello world</p><!-- 简写 --><p :style="{color:color,fontSize:fontSize}">hello world</p><p :class="'active'">hello world</p></div><script>const vm = new Vue({el: ".app",data: {isActive: true,isBigger: true,style1: {active: () => this.isActive,bigger: () => this.isBigger,},active: "active",bigger: "bigger",color: "green",fontSize: "2rem",},});</script></body></html>
六、条件与显示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>条件与显示</title><script src="../0907/module/vue.js"></script></head><body><div class="app"><p v-if="score > 90 && score <= 100">学帝</p><p v-else-if="score >= 80 && score < 90">学霸</p><p v-else-if="score >= 60 && score < 80">学渣</p><p v-else>留级</p><hr /><button type="button" v-on:click="handle">{{tips}}</button><p v-show="flag">Vue是一个语法简洁的渐进式前端框架</p></div><script>const vm = new Vue({el: ".app",data: {score: 95,flag: true,tips: "隐藏",},methods: {handle() {this.flag = !this.flag;this.tips = this.flag ? "隐藏" : "显示";},},});// if(){}: v-if//if(){} else {} : v-else//if (){} else if (){} else{} : v-else-if</script></body></html>
七、列表渲染
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>列表渲染</title><script src="../0907/module/vue.js"></script></head><body><div class="app"><ul><!-- 数组 --><li v-for="color of colors">{{color}}</li></ul><hr /><ul><!-- 对象 --><li v-for="(item,key) of course">{{key}} : {{item}}</li></ul><hr /><ul><li v-for="user of users">{{user.name}}({{user.email}})</li></ul></div><script>//遍历数组const arr = ["html", "css", "js"];console.log(Object.keys(arr));Object.keys(arr).forEach((item) => console.log(arr[item]));//遍历对象const obj = { id: 1, name: "peter", email: "peter@php.cn" };Object.keys(obj).forEach((item) => console.log(obj[item]));//遍历对象数组const objArr = [{ id: 1, name: "apple" },{ id: 2, name: "orange" },];console.log(Object.keys(objArr));Object.keys(objArr).forEach((item) =>console.log(objArr[item].id, objArr[item].name));/*let lis = "";lis += Object.keys(objArr).map((item) => {return `<li>${objArr[item].id} : ${objArr[item].name}</li>`;});console.log(lis);const ul = document.createElement("ul"); *///或者for (item of objArr) {console.log(item.id, item.name);}const vm = new Vue({el: ".app",data: {//arraycolors: ["red", "green", "blue"],//objectcourse: { name: "vue基础", lecture: "朱老师" },//obj-arrusers: [{ name: "admin", email: "admin@qq.com" },{ name: "zhang", email: "zhang@qq.com" },],},});</script></body></html>
学习总结
1.模板语法：
文本：
数据绑定最常见的形式就是使用“Mustache”语法 (
双大括号) 的文本插值<span>Message: {{ msg }}</span>通过使用
v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。原始 HTML:
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用
v-htmlv-:Vue指令的前缀，以html自定义属性的方式书写支持JavaScript 表达式
2.计算属性和过滤器
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
对于任何复杂逻辑，都应使用计算属性
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道” 符号
|指示
3.侦听器属性
Vue 通过
watch来添加侦听器侦听器应用场景：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
4.样式修改
(1)绑定在class上
- 对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class```<div v-bind:class="{ active: isActive }"></div>``````data: {isActive: true,hasError: false}```上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive是否为真`v-bind:class` 指令也可以与普通的 class 属性共存
数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表
<div v-bind:class="[activeClass, errorClass]"></div>
data: {activeClass: 'active',errorClass: 'text-danger'}
(2)绑定在内联样式上
- 对象语法
`v-bind:style`来设置内联样式```
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
``````data: {ctiveColor: 'red',fontSize: 30}```
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
5.条件与显示
v-if指令用于条件性地渲染一块内容v-else添加一个“else 块”v-else-if添加一个“else if(){} 块”v-show只是简单地切换元素的 CSS 属性 display
6.列表渲染
v-for指令基于一个数组来渲染一个列表v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名
在 v-for 块中，我们可以访问所有父作用域的属性
v-for 还支持一个可选的第二个参数，即当前项的索引
可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法
<div v-for="item of items"></div>
Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致