目录
1)v-model:数据双向绑定
2)v-bind:绑定标签属性值,例如:v-bind:class/v-bind:id
3){{}}:插值,针对标签中文本值进行插入操作
1.1 插值
1.1.1 文本
{{msg}}
1.1.2 html
使用v-html指令用于输出html代码
1.1.3 属性
HTML属性中的值应使用v-bind指令
错误 :报错,不变色
正确:变色
1.1.4 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}:截取0-6,转成大写
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>:接list+后面id的值
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<style>
.cl{
color: aqua;
}
</style>
<body>
<!-- 定义管理边界 -->
<div id="app">
<h1>{{ts}}</h1>
<h2>1,插值</h2>
<ol>
<li>文本</li>
<span>
{{msg}}
</span>
<li>html</li>
<span v-html="html"></span>
<li>v-bind绑值</li>
<!--
1)v-model:数据双向绑定
2)v-bind:绑定标签属性值,例如:v-bind:class/v-bind:id
3){{}}:插值,针对标签中文本值进行插入操作
-->
<span v-bind:class="cls">
新游记真好看!!
</span>
<li>表达式</li>
{{msg.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
</ol>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
ts:new Date().getTime(),
msg:'hello vue!!!',
html:'<input type="text" value="2"/>',
cls:'cl',
number:10,
ok:true,
id:101
},
methods:{
}
});
</script>
</html>
1.2 指令(指的是带有“v-”前缀的特殊属性)
v-if 、 v-else、 v-else-if
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
v-show和v-model
v-show:与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none",相当于隐藏
打勾显示,不打勾不显示
v-for/v-model/v-bind/{{}}
下拉框
多选框
获取到id
第四种方法
第五种
参数,动态参数及简写
方法二
v-bind:简写变成: 例如:v-bind:id -> :id
v-on:简写变成@ 例如:v-on:click -> @click
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<style>
.cl{
color: aqua;
}
</style>
<body>
<!-- 定义管理边界 -->
<div id="app" style="margin-bottom: 200px ;">
<h1>{{ts}}</h1>
<h2>指令</h2>
<ol>
<li>v-if|v-else|v-else-if</li>
<span v-if="sex=='boy'">
你算是个男的
</span>
<span v-else-if="sex=='girl'">
你是个女汉子
</span>
<span v-else>
不男不女
</span>
<li>v-show和v-model</li>
<div>
<input type="checkbox" v-model="flag" />已阅读该协议
<div v-show="flag">
君不见
</div>
</div>
<li>v-for/v-model/v-bind/{{}}</li>
<div v-for="(d,i) in arrays">
i={{i}},d={{d}}
</div>
<!-- <div>
<select>
<option value="">---请选择---</option>
<option v-for="d in depts" v-bind:value="d.id">
{{d.name}}
</option>
</select>
</div> -->
<!-- <span v-for="s in depts">
<input type="checkbox" v-bind:value="s.id" v-model="rs" />
{{s.name}}
</span>
<span v-if="rs.length!=0">
{{rs}}
</span> -->
<li>参数,动态参数及简写</li>
<span>
<!-- <a v-bind:[attrname]="url">搜狗</a><br />
<a v-on:[eventname]="doClick">点我</a> -->
<!-- 简写 -->
<!--
v-bind:简写变成: 例如:v-bind:id -> :id
v-on:简写变成@ 例如:v-on:click -> @click
-->
<a :href="url">搜狗</a><br />
<a @click="doClick">点我</a>
</span>
</ol>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
ts:new Date().getTime(),
sex:'boy',
flag:false,
depts:[
{id:1,name:'研发部'},
{id:2,name:'市场部'},
{id:3,name:'客户部'},
{id:4,name:'人事部'}
],
arrays:[1,2,3,4],
rs:[],
url:'https://123.sogou.com',
attrname:'href',
eventname:'dblclick'
},
methods:{
doClick(){
alert(123);
}
}
});
</script>
</html>
过滤器(全局和局部)
v 是 将要过滤的字段
局部过滤器
全局过滤器(导一个date.js)
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="js/date.js"></script>
</head>
<body>
<!-- 定义管理边界 -->
<div id="app" style="margin-bottom: 200px ;">
<h1>{{ts}}</h1>
<h2>过滤器(全局和局部)</h2>
<div>
<!-- 局部过滤器 -->
{{title|strFilter}}<br />
<!-- 全局过滤器 -->
{{dt|dateFilter|strFilter}}
</div>
</ol>
</div>
</body>
<script>
//全局过滤器
Vue.filter('dateFilter',function(v){
/* return fmtDate(v); */
return fmtDate(v,'yyyy年MM月dd日');
});
//每一个Vue实例都是从new构造函数开始
var vm=new Vue({
el:'#app',
data:{
ts:new Date().getTime(),
title:'hello vue!!',
dt:new Date()
},
methods:{
},
filters:{
strFilter:function(v){
return v.substr(0,6).toUpperCase();
}
}
});
</script>
</html>
计算属性
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="js/date.js"></script>
</head>
<body>
<!-- 定义管理边界 -->
<div id="app" style="margin-bottom: 200px ;">
<h1>{{ts}}</h1>
<h2>计算属性</h2>
<div v-for="s in score">
编号={{s.id}},科目={{s.name}},成绩={{s.sc}}
</div>
<span>总分:{{sum}}</span>
</ol>
</div>
</body>
<script>
//每一个Vue实例都是从new构造函数开始
var vm=new Vue({
el:'#app',
data:{
ts:new Date().getTime(),
score:[
{id:1,name:'语文',sc:110},
{id:2,name:'数学',sc:90},
{id:3,name:'英语',sc:90},
{id:4,name:'文科',sc:210}
]
},
methods:{
},
computed:{
sum:function(){
let s=0;
//面试题:let和var的区别?
//let是局部变量定义
//var是全局变量定义,容易产生数据干扰或者是污染
for(let sc of this.score)
s+=sc.sc;
return s;
}
}
});
</script>
</html>
监听属性
watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义管理边界 -->
<div id="app" style="margin-bottom: 200px ;">
<h1>{{ts}}</h1>
<h2>监听属性</h2>
kb:<input type="text" v-model="kb" /><br />
mb:<input type="text" v-model="mb" /><br />
</body>
<script>
//每一个Vue实例都是从new构造函数开始
var vm=new Vue({
el:'#app',
data:{
ts:new Date().getTime(),
kb:1024,
mb:1
},
methods:{
},
watch:{
//监听属性必须保证属性是存在的!!!
kb:function(v){
this.mb=v/1024;
},
mb:function(v){
this.kb=v*1024;
}
}
});
</script>
</html>