为什么要用Vue模板语法
Vue模板语法是Vue.js框架的一部分，使用它有以下几个优点：
- 简化了HTML代码编写：Vue模板语法支持简化HTML标签和属性的写法，使得代码更加简洁易读，提高开发效率。
- 数据绑定：Vue模板语法支持数据双向绑定，可以将数据自动更新到对应的DOM元素，从而避免了手动操作DOM的麻烦。
- 条件渲染：Vue模板语法支持条件渲染，可以根据特定条件来渲染特定的内容，从而提升用户体验。
- 循环渲染：Vue模板语法支持循环渲染，可以根据特定的数据进行循环渲染相同结构的元素，从而避免了重复编写代码的麻烦。 综上所述，Vue模板语法简化了HTML代码编写，提供了数据绑定、条件渲染、循环渲染等功能，使得Vue.js开发更加高效、可维护和易于扩展。
插值
插值不仅可以显示数据和JavaScript表达式，还可以显示Vue.js指令、事件和组件等内容，可以帮助开发者更加方便地操作数据和DOM元素，提高开发效率和代码可读性。
需要注意的是，Vue模板语法插值只是一种数据绑定的方式，插值中的内容必须是一些安全的文本，不能够包含HTML标签或其他恶意代码，否则会出现安全问题。对于需要渲染HTML标签的内容，应该使用Vue.js提供的v-html指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title>插值</title> <style type="text/css"> .f30{ font-size:30px; } </style> </head> <body> <!-- 定义vue所管理的边界，有且只有一个根节点 --> <div id="app"> <p>文本</p> {{msg}} <p>html解析</p> {{msg2}}<br> <b :class="msg3" v-html="msg2"></b> <p>表达式</p> {{mun+1}} {{warn.substr(0,2)}} <input v-model="ok" /> {{ok?'成功了':'失败了'}} </div> <script type="text/javascript"> new Vue({ el:"#app", data(){ return{ msg:'hello 小B 你相信光吗？', msg2:'<span style="color:yellow">hello 小B</span>', msg3:'f30', num:6, warn:'听到我的招换了吗？', ok:true }; } }); </script> </body> </html>
指令
上述只是常用的一些指令，Vue.js还提供了很多强大的指令和功能，可以根据实际需要选择合适的指令使用。同时需要注意的是，在使用Vue指令时需要遵守Vue的规范，正确使用Vue指令才能发挥出它的优点，提高开发效率和代码质量。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title>指令</title> </head> <body> <div id="app"> <p>v-if/v-else-if/v-else</p> <input v-model="score"/><br /> <b v-if="score < 60">不及格</b> <b v-else-if="score>60 && score< 70">及格</b> <b v-else-if="score>70 && score< 80">一般</b> <b v-else-if="score>80 && score< 90">良好</b> <b v-else="">优秀</b> <!-- 60以下 不及格 60-70 及格 70-80 一般 80-90 良好 90以上 优秀 --> <p>v-show</p> v-if 与v-show的区别？<br> <b v-if="isShow">展示</b> <b v-show="isShow">展示</b> <p>v-for</p> <i v-for="a in arr">{{a}} </i> <i v-for="i,u in users">{{u.name}} {{i}}</i> <select> <option v-for ="h in hobby" :value="h.id">{{h.name}}</option> </select> <div id="" v-for="h in hobby"> <input type="checkbox" name="hobby" :value="h.id"/>{{h.name}} </div> <p>动态参数</p> <input v-model="evname" /> <button v-on:[evname]="test">点我</button> </div> <script type="text/javascript"> new Vue({ el:"#app", data(){ return{ score:69, isShow:false, arr: [1,2,3,4], users:[{ name:'lb',id:1 },{ name:'lx',id:2 },{ name:'lz',id:3 },{ name:'lw',id:4 }], hobby:[{ name:'洗脚',id:1 },{ name:'洗脚',id:2 },{ name:'洗脚',id:3 },{ name:'SPA',id:4 }], evname:'click' }; }, methods:{ test(){ //单机事件， alert('点我试试!!! '); } } }); </script> </body> </html>
过滤器
Vue.js的过滤器是一个强大的功能，可以让我们轻松地处理模板中的数据，提高代码的可读性和可维护性。同时需要注意的是，过滤器只适合于简单的数据格式化和处理，如果需要进行复杂的数据操作，应该使用计算属性或方法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="date.js" type="text/javascript" charset="UTF-8"></script> <title>过滤器</title> </head> <body> <div id="app"> <p>局部过滤器基本应用</p> {{msg}}<br /> {{msg |filterA}} <p>局部过滤器串行应用</p> {{msg}}<br /> {{msg |filterA |filterB}} <p>局部过滤器传参</p> {{msg | filterC(3,10)}}<br /> <p>全局过滤器</p> {{time}}<br /> {{time | fmtDateFilter}} </div> <script type="text/javascript"> Vue.filter('fmtDateFilter', function(value) { //value表示要过滤的内容 return fmtDate(value); }); new Vue({ el: "#app", filters: { 'filterA': function(v) { return v.substring(0, 6) }, 'filterB': function(v) { return v.substring(2, 5) }, 'filterC': function(v, begin, end) { return v.substring(begin, end); } }, data() { return { msg: '想死了', time: new Date() } }, methods: { test() { alert('点我试试！！！'); } } }); </script> </body> </html>
排座
<!DOCTYPE html> <html> <head> <title>排座</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <h2>排座</h2> <input type="text" v-model="seatInput1"> <input type="text" v-model="seatInput2"> <input type="text" v-model="seatInput3"> <hr> <h3>用户:</h3> <ul> <!-- 遍历过滤器传来的值 --> <li v-for="user in filteredUsers" :key="user.id">{{ user.name }}</li> </ul> <hr> </div> <script> new Vue({ el: '#app', data: { seatInput1: '', seatInput2: '', seatInput3: '', users: [{ id: 1, name: '刘鑫' }, { id: 2, name: '刘文' }, { id: 3, name: '刘兵' }, { id: 4, name: '刘志' }, { id: 5, name: '大B' } ] }, /* 定义一个filteredUsers计算属性 */ computed: { /* 使用filter方法来过滤users数组中的元素。filter方法接受一个回调函数作为参数， 该回调函数会对数组中的每个元素进行判断，并返回一个新的数组，其中包含满足条件的元素。 */ filteredUsers() { return this.users.filter( /* 使用=>箭头函数的语法来定义一个匿名函数。这个匿名函数接受一个参数user， 表示users数组中的每个元素。 */ user => { /* 使用逻辑运算符&&来判断user.name是否不等于seatInput1、seatInput2和seatInput3的值。 如果满足这个条件，说明user.name不等于任何一个输入框的值，那么这个元素就会被保留在过滤后 的数组中。 */ return user.name !== this.seatInput1 && user.name !== this.seatInput2 && user.name !== this.seatInput3 }); } } }); </script> </body> </html>
计算属性监听属性
计算属性
Vue.js的计算属性是一个非常有用的功能，它可以提高代码的可读性和可维护性，同时也可以实现复杂的数据计算和处理。如果需要进行非响应式的数据操作，建议使用methods方法。
监听属性
在上面的例子中，我们定义了一个数据属性message，并且使用watch选项来监听该数据属性的变化。当该数据属性发生变化时，会触发watch中对应的函数，实现对数据属性变化的响应。
需要注意的是，使用watch选项来监听数据属性的变化时，需要在Vue实例中显式地定义响应式的数据属性，并且需要将计算属性转为响应式的数据属性，以便在watch选项中进行监听。
总的来说，Vue.js的监听属性功能可以帮助我们实现对数据属性的变化响应，可以在实际开发过程中提高代码的可读性和可维护性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title>计算属性监听属性</title> <style type="text/css"> .f30{ font-size: 30px; } </style> </head> <body> <div id="app"> <p>计算机属性</p> 单价:<input v-model="price" /> 数量:<input v-model="num" /> 小计: {{count}} <p>监听属性</p> 千米: <input v-model="km" /><br /> 米：<input v-model="m" /> </div> <script> new Vue({ el:'#app', data(){ return{ price:79, num:1, m:1000, km:1 }; }, computed:{ count:function(){ return this.price * this.num; } }, watch:{ km:function(v){ //v指的是被监听的属性，是km this.m =parseInt(v) * 1000; }, m:function(v){ //v指的是被监听的属性，是m this.km = parseInt(v)/1000; } } }); </script> </body> </html>
