模板语法
1. 插值
- 文本
{{msg}} - html
使用v-html指令用于输出html代码 - 属性
HTML属性中的值应使用v-bind指令 - 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
< li v-bind:id="‘list-’ + id">我的Id是js动态生成的
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<h3>文本</h2>
{{msg}}
<h3>使用v-html指令用于输出html代码</h3>
<!-- 如果直接写 页面显示 <span style="color:blue">我是html</span> -->
{{html}}
<!-- 我们只要 html 类容的话 需要 加一个属性 v-html ,属性里直接填 return 下的名字 -->
<div v-html="html"></div>
<h3>属性</h3>
<input name="hobby" value="看书" />
<!-- 需要 v-bind 属性 可以简写为 :value -->
<input name="hobby" :value="val" />
<h3>表达式</h3>
{{str.substr(0,6).toUpperCase()}}<br>
{{ number + 1 }}<br>
{{ ok ? 'YES' : 'NO' }}<br>
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
msg : '要插入的文本',
html : '<span style="color:blue">我是html</span>',
val : '篮球',
str : 'https://www.uc123.com/',
number: '1',
ok : false,
id : '9',
}
},
})
</script>
</html>
网页显示:
js动态生成id
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
2.指令
指的是带有“v-”前缀的特殊属性
核心指令: ( v-if | v-else |v-else-if )/ v-show / v-for / v-bind / v-on / v-model )
- v-if|v-else|v-else-if:根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if - v-show:与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style=“display:none”
- v-for:类似JS的遍历,
遍历数组: v-for=“item in items”, items是数组,item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名,index下标 - v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值
v-for/v-model一起绑定[多选]复选框和单选框
代码演示:
<!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">
<h3>条件指令 if,elseif,else</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"/>
<h3>条件指令 show</h3>
<!-- 当输入框 的值等于1 就显示htmL值,反之不显示 -->
<div v-show="msg == 1">需要展示的类容</div>
<input v-model="msg" />
<h3>条件指令 v-for</h3>
<!-- 有一组复选框,想要获取复选框被选中的值 -->
<h4 > 遍历数组</h4>
<div v-for="item in vfor">
<input type="checkbox" v-model="checkedVals" name="hobyy" v-bind:value="item.id"/>{{item.name}}
</div>
<input v-model="checkedVals" />
<h4> 遍历对象</h4>
<div v-for="(value, key, index) in vfor">
{{ index }}. {{ key }} : {{ value }}
</div>
<h4>下拉框</h4>
<select name="likes" v-model="selectVals">
<option v-for="item in vfor" :value="item.id" >{{item.name}}</option>
</select>
<input v-model="selectVals" />
<h3>动态参数</h3>
<button @[evname]="clickMe">点我啊</button>
<input v-model="evname" />
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
score: 80,
msg : '',
vfor :[{
id : 1,
name :'亚索'
},{
id : 2,
name :'德玛'
},{
id : 3,
name :'剑圣'
},{
id : 4,
name :'德邦'
}],
checkedVals :[],
selectVals : '',
evname : 'click'
}
},
methods:{
clickMe(){
alert('动态参数我又来了');
}
}
})
</script>
</html>
运行结果:
3. 过滤器
-
全局过滤器
Vue.filter(‘filterName’, function (value) {
// value 表示要过滤的内容
}); -
局部过滤器
new Vue({
filters:{‘filterName’:function(value){}}
}); -
vue允许你自定义过滤器,被用作一些常见的文本格式化,格式如下:
在两个大括号中
{{ name | capitalize }}在 v-bind 指令中
< div v-bind:id=“rawId | formatId”>
案例 :网址截取进行大小转换
<!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">
<h3>局部过滤器的注册</h3>
{{msg}}<br>
{{msg | a}}<br>
<h3>局部过滤器的串联</h3>
{{msg}}<br>
{{msg |a | b}}<br>
<h3>全局过滤器的注册</h3>
{{msg |a | b}}<br>
</div>
</body>
<script type="text/javascript">
Vue.filter("c",function(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){
/* 网址前8个字符变小写,后面变大写 */
return v.substr(0,8).toLowerCase()+v.substr(8,17).toUpperCase();
}
}
})
</script>
</html>
没有定义全局过滤器时
定义全局过滤器:
4. 计算属性
需要的属性:computed{}
<!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">
<h3>计算属性</h3>
苹果单价:<input v-model="price" /><br />
购买的数量 :<input v-model="num" /><br />
小计:{{total}}
<h3>计算监听属性</h3>
km:<input v-model="km" /><br />
m :<input v-model="m" /><br />
</div>
</body>
<script type="text/javascript">
new Vue({
el : '#app',
data(){
return{
msg : '',
price : 6,
num : 2,
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>
计算属性实现简单的购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>购物车</title>
<style>
table tr td {
height: 30px;
}
</style>
</head>
<body>
<div id="app">
<table border="1px" width="60%" style="text-align: center;" cellpadding="0px" cellspacing="0px">
<tr>
<td>id</td>
<td>商品</td>
<td width="200px">价格</td>
<td width="200px">数量</td>
<td>小计</td>
</tr>
<tr >
<td>1</td>
<td>苹果</td>
<td><input size="13" v-model="psum" /></td>
<td><input size="13" v-model="pcount" /></td>
<td>{{total1}}</td>
</tr>
<tr>
<td>2</td>
<td>香蕉</td>
<td><input size="13" v-model="xsum" /></td>
<td><input size="13" v-model="xcount" /></td>
<td>{{total2}}</td>
</tr>
<tr >
<td>3</td>
<td>梨子</td>
<td><input size="13" v-model="lsum" /></td>
<td><input size="13" v-model="lcount" /></td>
<td>{{total3}}</td>
</tr>
<tr>
<td colspan="6"><span style="text-align: right;">总价{{sum}}</span></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
msg : '',
lsum: 5,
lcount: 1,
xsum: 3,
xcount: 1,
psum: 2,
pcount: 1
}
},
computed:{
//简单的购物车模拟
total1(){
return this.psum*this.pcount;
},
total2(){
return this.xsum*this.xcount;
},
total3(){
return this.lsum*this.lcount;
},
sum(){
return this.total1+this.total2+this.total3;
}
}
})
</script>
</html>