为什么要用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>
