目录
[1.1 文本插值](#1.1 文本插值)
[1.2 html](#1.2 html)
[1.3 属性](#1.3 属性)
[1.4 表达式](#1.4 表达式)
[2.1 v-if/v-else-if/v-else的使用](#2.1 v-if/v-else-if/v-else的使用)
[2.2 v-if 与v-show的区别](#2.2 v-if 与v-show的区别)
[2.3 v-for的使用](#2.3 v-for的使用)
[2.4 下拉框的使用](#2.4 下拉框的使用)
[2.5 复选框的使用](#2.5 复选框的使用)
[2.6 动态参数 --双击与单击](#2.6 动态参数 --双击与单击)
[3.1 局部过滤器](#3.1 局部过滤器)
[3.2 全局过滤器](#3.2 全局过滤器)
[4.1 计算属性](#4.1 计算属性)
[4.2 监听属性](#4.2 监听属性)
一.插值⭐
1.1 文本插值
<head>
<meta charset="utf-8">
<title>插值</title>
<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>
</head>
<body>
<!-- 定义边界 -->
<div id="contect">
{{msg}}
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
data(){
return{
msg:"hello CSDN"
}
}
})
</script>
</body>
效果：
1.2 html
html文本需要使用 v-html来实现效果
<body>
<!-- 定义边界 -->
<div id="contect">
文本: {{msg}} <br>
html解析:<b v-html="msg2"></b>
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
data(){
return{
msg:"hello CSDN",
msg2:"<span style='color: deeppink'> 我是佩奇</span>"
}
}
})
</script>
</body>
效果：
1.3 属性
属性要借用 ：Class来实现属性的转换
<style type="text/css">
.f30{
font-size: 30px;
}
</style>
</head>
<body>
<!-- 定义边界 -->
<div id="contect">
文本: {{msg}} <br>
html解析:<b v-html="msg2"></b> <br>
属性：<b :class="msg3" v-html="msg2"></b> <br>
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
data(){
return{
msg:"hello CSDN",
msg2:"<span style='color: deeppink'> 我是佩奇</span>",
msg3:"f30"
}
}
})
</script>
效果：
1.4 表达式
有计算，截取字段，以及三元运算符
<body>
<!-- 定义边界 -->
<div id="contect">
文本: {{msg}} <br>
html解析:<b v-html="msg2"></b> <br>
属性：<b :class="msg3" v-html="msg2"></b> <br>
表达式：{{num+1}} <br>
截取：{{warn.substr(0,2)}}<br>
<input v-model="ok"/>
{{ok==1?"我是乔治":"我是佩奇"}}
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
data(){
return{
msg:"hello CSDN",
msg2:"<span style='color: deeppink'> 我是佩奇</span>",
msg3:"f30",
num:6,
warn:"你好，我是乔治",
ok:1
}
}
})
</script>
效果：
二.指令⭐
2.1 v-if/v-else-if/v-else的使用
相当于以前的 if...else..
<!-- 定义边界 -->
<div id="contect">
<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><br >
小于60 不及格（落后了哦~🙂）<br >
60-70 及格（加油！！💪）<br >
70-80 一般（还差一点哦~）<br >
80-90 良好（就只有一点点啦！💪）<br >
大于90 优秀（成功啦！你真棒！）<br >
</div>
效果：
2.2 v-if 与v-show的区别
v-if 是"条件渲染"的指令，它会根据条件的真假来动态地添加或删除元素及其对应的组件
v-show 是"条件显示"的指令，它会根据条件的真假来显示或隐藏元素。无论条件是真是假，元素始终存在于 DOM 中，只是通过 CSS 控制其显示状态。
2.3 v-for的使用
<!-- 定义边界 -->
<div id="contect">
<p> v-for的使用</p>
<i v-for="u in users ">{{u}} </i>
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
data(){
return{
users:[{
name:"佩奇",id:1
},{
name:"乔治",id:2
},{
name:"珊迪",id:3
}]
}
}
})
</script>
效果： 
2.4 下拉框的使用
<body>
<!-- 定义边界 -->
<div id="contect">
<p> 下拉框的使用</p>
<select>
<option v-for=" u in users" :value="u.id">
{{u.name}}
</option>
</select>
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
data(){
return{
users:[{
name:"佩奇",id:1
},{
name:"乔治",id:2
},{
name:"珊迪",id:3
}]
}
}
})
</script>
</body>
效果：
2.5 复选框的使用
<body>
<!-- 定义边界 -->
<div id="contect">
<p>复选框的使用</p>
<div v-for="u in users" >
<input type="checkbox" name="users" :value="u.id"/>{{u.name}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
data(){
return{
users:[{
name:"佩奇",id:1
},{
name:"乔治",id:2
},{
name:"珊迪",id:3
}]
}
}
})
</script>
</body>
效果：
2.6 动态参数 --双击与单击
它们的不同就是下面圈出来的
效果：第一个按钮是单击，第二个是双击
三.过滤器
3.1 局部过滤器
局部过滤器是在组件内部定义的过滤器，只在该组件的模板中可用。
以下代码中有三个局部过滤器的使用，基本上的作用是差不多的，我觉得可以用数学中的交集并集来理解，或者是用来截取其中一段文字来理解
<!-- 定义边界 -->
<div id="contect">
<p>局部过滤器基本应用</p>
{{msg | filterA}}
<p>局部过滤器串行使用</p>
{{msg}}<br>
{{msg | filterA}}<br>
{{msg | filterA|filterB}}<br>
<p>局部过滤器传参</p>
{{msg | filterC(2,6)}}
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
filters:{
'filterA':function(v){//v表示要过滤的内容
return v.substring(0,6);
},
'filterB':function(v){
return v.substring(2,4);
},
'filterC':function(v,begin,end){
return v.substring(begin,end);
}
},
data(){
return{
msg:"这是我的弟弟乔治"
}
}
})
</script>
效果：
3.2 全局过滤器
全局过滤器是在 Vue 实例化之前定义的过滤器，它可以在所有组件的模板中使用。
下面主要是一个时间的处理, 首先写一个时间的js---data.js
//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
//debugger;
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
function fmtDate(date, pattern) {
var ts = date.getTime();
var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
if (pattern) {
d = new Date(ts).format(pattern);
}
return d.toLocaleString();
};
接着将其引入我们的项目中
<!-- 定义边界 -->
<div id="contect">
<p>全局过滤器</p>
{{time}}<br />
{{time|fmtDataFilter}}
</div>
<script type="text/javascript">
Vue.filter('fmtDataFilter',function(value){
return fmtDate(value);
});
new Vue({
el:"#contect",
data(){
return{
msg:"这是我的弟弟乔治",
time:new Date()
}
}
})
</script>
效果： 
四.计算属性和监听器（监听属性）⭐
计算属性是单方影响，而监听属性是双方影响
4.1 计算属性
<body>
<!-- 定义边界 -->
<div id="contect">
<!-- 单方影响 -->
计算属性：
单价：<input v-model="price"/>
数量：<input v-model="num"/>
小计：{{count}}<br />
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
data(){
return{
price:99,
num:1,
m:1000,
km:1
};
},
computed:{//computed计算属性
count:function(){
return this.price * this.num
}
}
})
</script>
</body>
效果：
4.2 监听属性
<body>
<!-- 定义边界 -->
<div id="contect">
<!-- 双方影响 -->
监听属性：<br />
千米：<input v-model="km" /><br />
米：<input v-model="m"/>
</div>
<script type="text/javascript">
new Vue({
el:"#contect",
data(){
return{
m:1000,
km:1
};
}，
watch:{//watch监听属性
km:function(v){ //v是被监听的属性 km
this.m=parseInt(v)*1000
},
m:function(v){ //v是被监听的属性 m
this.km=parseInt(v)/1000
}
}
})
</script>
</body>
效果：
五.购物车案例
运用上面的知识搭建一个简单的购物车界面，并实现单价数量以及总价的改变
下面是一个界面，用了三个<tr>
<div id="contect">
<h2>购物车</h2>
<table border="1">
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>怡宝</td>
<td>{{price1 }}</td>
<td>
<button @click="gooddel1">-</button>
{{num1}}
<button @click="goodadd1">+</button>
</td>
<td>{{count1}}</td>
</tr>
<tr>
<td>百岁山</td>
<td>{{price2 }}</td>
<td>
<button @click="gooddel2">-</button>
{{ num2}}
<button @click="goodadd2">+</button>
</td>
<td>{{count2}}</td>
</tr>
<tr>
<td>农夫山泉</td>
<td>{{price3 }}</td>
<td>
<button @click="gooddel3">-</button>
{{ num3}}
<button @click="goodadd3">+</button>
</td>
<td>{{count3}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总价：</td>
<td>{{total}}</td>
</tr>
</tfoot>
</table>
</div>
接下来，写方法实现：
把价格和数量首先是定死的，为了演示，接着写加号的点击事件，和减号的点击事件，以及小计和总计的计算
<script>
new Vue({
el: '#contect',
data: {
price1:30,
price2:10,
price3:20,
num1:1,
num2:1,
num3:1
},
computed: {
count1:function(){
return this.price1 * this.num1;
},
count2:function(){
return this.price2 * this.num2;
},
count3:function(){
return this.price3 * this.num3;
},
total:function(){
return this.count1 + this.count2 +this.count3;
}
},
methods: {
goodadd1: function() {
return this.num1++;
},
goodadd2: function() {
return this.num2++;
},
goodadd3: function() {
return this.num3++;
},
gooddel1: function() {
if(this.num1>1){
return this.num1--;
}
},
gooddel2: function() {
if(this.num2>1){
return this.num2--;
}
},
gooddel3: function() {
if(this.num3>1){
return this.num3--;
}
},
}
});
</script>
现在来看效果吧！！
