模板语法
插值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>插值</title>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>文本插值</h3>
{{msg}}
</li>
<li>
<h3>html片段插值</h3>
<div v-html="htmlStr"></div>
</li>
<li>
<h3>属性插值</h3>
<input name="hobby" value="笑笑" />
<input name="hobby" v-bind:value="a" />
</li>
<li>
<h3>表达式插值</h3>
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
msg: '要插入的文本',
htmlStr: '<span style="color:red";>要显示的html片段</span>',
a: '十年',
str:'https://www.baidu.com/',
number:2,
ok:false,
id:6,
}
}
})
</script>
</html>
结果
指令
核心指令和动态参数、修饰符
核心指令和动态参数代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>指令</title>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>条件指令 (v-if|v-else|v-else-if)</h3>
<div v-if="score>90">A</div>
<div v-else-if="score>80">B</div>
<div v-else-if="score>70">C</div>
<div v-else-if="score>60">D</div>
<div v-else="">E</div>
<input v-model="score" />
</li>
<li>
<h3>条件指令 v-show</h3>
<div v-show="msg">需要展示的内容 </div>
<input v-model="msg" />
</li>
<li>
<h3>循环指令 v-for</h3>
<!-- 有一组复选框，想要获取复选框被选中的值 -->
<div v-for="item in hobby" >
<input type="checkbox" name="hobby":value="item.id" v-model="checkedVals"/>{{item.name}}
</div>
<input v-model="checkedVals"/>
<select name="likes" v-model="selectedVal">
<option v-for="item in hobby":value="item.id">{{item.name}}</option>
</select>
<input v-model="selectedVal"/>
</li>
<li>
<h3>动态参数</h3>
<!-- <button v-on:[evname]="clickMe">点我1</button> -->
<!-- <button @click="clickMe">点我2</button> -->
<button v-on:[evname]="clickMe">点我3</button>
<input v-model="evname" /><!-- 直接更改输入框的指令例如dblclick -->
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
score:80,
msg:'',
hobby:[{id:1,name:'笑笑'},
{id:2,name:'十年'},
{id:3,name:'少'}],
checkedVals:[],
selectedVal:'',
evname:'click'
}
},
methods:{
clickMe(){
alert('click me');
}
}
})
</script>
</html>
结果
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form>
注1：event.preventDefault()方法的作用？
该方法将通知Web浏览器不要执行与事件关联的默认动作(如果存在这样的动作)
过滤器
局部过滤器和全局过滤器
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>插值</title>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>局部过滤器的注册</h3>
{{msg}}<br />
{{msg.substr(0,6).toUpperCase()}}<br />
{{msg|a}}<br />
</li>
<li>
<h3>局部过滤器的串联</h3>
{{msg}}<br />
{{msg| a | b}}<br />
</li>
<li>
<h3>全局过滤器的注册</h3>
{{msg}}<br />
{{msg| a | b}}<br />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.filter("c",(v)=>{
return v.substr(0,1).toUpperCase()+v.substr(1,17);
})
new Vue({
el: '#app',
data() {
return {
msg: 'https://www.baidu.com/',
}
},
filters:{
a(v){
return v.substr(0,17).toUpperCase();
},
b(v){
return v.substr(0,8).toLowerCase()+v.substr(8,17);
}
}
})
</script>
</html>
结果图
计算属性与监听属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:{}
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>插值</title>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>计算机属性</h3>
苹果单价：<input type="text" v-model="price" />
购买数量：<input type="text" v-model="num" />
小计：{{total}}
</li>
<li>
<h3>监听属性</h3>
km：<input type="text" v-model="km" />
m：<input type="text" v-model="m" />
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
price:6,
num:1,
km:1,
m:1000
}
},
computed:{
total(){
return this.price*this.num
}
},
watch:{
km(v){
this.m=v*1000;
},
m(v){
this.km=v/1000;
}
}
})
</script>
</html>
结果
计算属性和监听属性的区别
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!
Vue购物车
简单版本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>购物车</title>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>购物车</h3>
苹果单价：<input type="text" v-model="price" />
购买数量：<input type="text" v-model="num" />
小计：{{total}}
<br />
香蕉单价：<input type="text" v-model="price1" />
购买数量：<input type="text" v-model="num1" />
小计：{{total1}}
<br />
总计：{{totas}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
price:6,
num:1,
price1:6,
num1:1,
}
},
computed:{
total(){
return this.price*this.num
},
total1(){
return this.price1*this.num1
},
totas(){
return this.total1+this.total
}
}
})
</script>
</html>
结果
扫一扫
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
