本文详细介绍了Vue的基础语法，包括模板语法、属性、表达式、指令（如v-if/v-else/v-else-if、v-show、v-for）以及过滤器和计算属性的使用。通过示例展示了如何在Vue中进行文本插值、数据绑定、条件渲染、循环遍历以及自定义过滤器和计算属性的计算逻辑。
一、模板语法
1.插值
文本
{{msg}}
示例：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一 手动方式 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二 CDN -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="zhq">
<h1>{{ts}}</h1>
<h2>插值</h2>
<ol>
<li>文本</li>
<span>
{{msg}}
</span>
</ol>
</div>
</body>
<script>
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
var vm=new Vue({
el:'#zhq',
data:function(){
return{
msg:'Hello vue',
ts:new Date().getTime(),
}
},
methods:{
}
})
</script>
</html>
错误示范：
<!-- ！！！错误示范！！！ -->
<h1 title="{{msg}}"></h1>
html
使用v-html指令用于输出html代码
示例：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一 手动方式 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二 CDN -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<style>
.cl{
color: pink;
}
</style>
<body>
<div id="zhq">
<h1>{{title}}</h1>
<h2>插值</h2>
<ol>
<li>文本</li>
<span>
{{msg}}
</span>
<li>html</li>
<span v-html="html"></span>
</ol>
</div>
</body>
<script>
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
var vm=new Vue({
el:'#zhq',
data:function(){
return{
msg:'Hello vue',
ts:new Date().getTime(),
html:'<input type="text" value="2"/>',
}
},
methods:{
}
})
</script>
</html>
属性
HTML属性中的值应使用v-bind指令
示例：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一 手动方式 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二 CDN -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<style>
.cl{
color: pink;
}
</style>
<body>
<div id="zhq">
<h1>{{title}}</h1>
<h2>插值</h2>
<ol>
<li>文本</li>
<span>
{{msg}}
</span>
<li>html</li>
<span v-html="html"></span>
<!--
1.v-model:数据双向绑定
2.v-biand:绑定标签属性值 例：v-bind:css v-bind:id
3.{{}}:插值，针对标签中的文本值进行操作
-->
<li>v-bind绑值</li>
<span v-bind:class="cls" v-bind:id="123">
我变色了
</span>
</ol>
</div>
</body>
<script>
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
var vm=new Vue({
el:'#zhq',
data:function(){
return{
msg:'Hello vue',
ts:new Date().getTime(),
html:'<input type="text" value="2"/>',
cls:'cl',
}
},
methods:{
}
})
</script>
</html>
我们在外面给cl定义了一个样式，然后用v-bind给span标签绑定class,span中的内容也变色了。
又用v-bind给它绑了一个id为123，在前端控制台也能很清楚的看到
表达式
Vue提供了完全的JavaScript表达式支持
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一 手动方式 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二 CDN -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<style>
.cl{
color: pink;
}
</style>
<body>
<div id="zhq">
<h1>{{ts}}</h1>
<h2>插值</h2>
<ol>
<li>文本</li>
<span>
{{msg}}
</span>
<li>html</li>
<span v-html="html"></span>
<!--
1.v-model:数据双向绑定
2.v-biand:绑定标签属性值 例：v-bind:css v-bind:id
3.{{}}:插值，针对标签中的文本值进行操作
-->
<li>v-bind绑值</li>
<span v-bind:class="cls" v-bind:id="123">
我变色了
</span>
<li>表达式</li>
<span>
{{msg.substr(0,6).toUpperCase()}}<br />
{{ number + 1 }}<br />
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
</span>
</ol>
</div>
</body>
<script>
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
var vm=new Vue({
el:'#zhq',
data:function(){
return{
msg:'Hello vue',
ts:new Date().getTime(),
html:'<input type="text" value="2"/>',
cls:'cl',
number:1,
ok:true,
id:22,
}
},
methods:{
}
})
</script>
</html>
同样也可以支持JavaScript表达式
第一个：截取（0，6）然后大写
第二个：加法运算
第三个：三元运算符
指令
指的是带有“v-”前缀的特殊属性
核心指令
v-if/v-else/v-else-if
代码：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一 手动方式 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二 CDN -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="zhq">
<h1>{{title}}</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>
</ol>
</div>
</body>
<script>
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
var vm=new Vue({
el:'#zhq',
data:function(){
return{
ts:new Date().getTime(),
sex:'gay',
}
},
methods:{
}
})
</script>
</html>
根据其后表达式的bool值进行判断是否渲染该元素
- 他们只能是兄弟元素
- v-else-if上一个兄弟元素必须是v-if
- v-else上一个兄弟元素必须是v-if或者是v-else-if
v-show
代码：
<li>v-show和v-model</li>
<div>
<input type="checkbox" v-model="flag" />已阅读该协议
<div v-show="flag">
嗨害,我出来了
</div>
</div>
<!-- 在data中定义一个flag -->
flag:false,
与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
v-for
代码：
<div id="zhq">
<h1>{{title}}</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="a in depts">
<input type="checkbox" v-bind:value="a.id" v-model="dt"/>{{a.name}}
</span><br />
<span v-if="dt.length!=0">
{{dt}}
</span>
</ol>
</div>
data:function(){
return{
ts:new Date().getTime(),
sex:'gay',
flag:false,
depts:[
{id:1,name:'研发部'},
{id:2,name:'调研部'},
{id:3,name:'人事部'},
{id:4,name:'客服部'}
],
dt:[],
arrays:[1,2,3,4,5],
}
},
类似JS的遍历
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
v-model
在Vue入门篇有讲解
用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
参数、动态参数、简写
代码：
<li>参数、动态参数、简写</li>
<span>
<!-- <a href="http://www.baidu.com">百度</a><br /> -->
<a v-bind:[attrname]="url">百度</a><br />
<a v-on:[eventname]="doClick">点我</a><br />
<!-- 简写 -->
<!--
v-on:简写变成@
v-bind:简写变成：
-->
<a :href="url">百度</a><br />
<a @click="doClick">点我</a>
</span>
var vm=new Vue({
el:'#zhq',
data:function(){
return{
ts:new Date().getTime(),
sex:'gay',
flag:false,
depts:[
{id:1,name:'研发部'},
{id:2,name:'调研部'},
{id:3,name:'人事部'},
{id:4,name:'客服部'}
],
dt:[],
arrays:[1,2,3,4,5],
url:'http://www.baidu.com',
attrname:'href',
eventname:'dblclick',
}
},
methods:{
doClick(){
alert(111);
}
}
})
在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定
注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写
二、过滤器
全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
<!-- 在两个大括号中 -->
{{ name | capitalize }} <!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div> 注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联
{{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
注4：js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
案例
首字母大写/日期格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一 手动方式 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二 CDN -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script src="js/date.js" type="text/javascript"></script>
</head>
<body>
<div id="zhq">
<h1>{{ts}}</h1>
<h2>过滤器（全局，局部）</h2>
<div>
<!-- 局部过滤器 -->
{{title|strFilter}}<br/>
<!-- 全局过滤器 -->
{{dt|dateFilter|strFilter}}
</div>
</div>
</body>
<script>
//全局过滤器
Vue.filter('dateFilter',function(v){
return fmtDate(v,'yyyy年MM月dd日')
});
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
var vm=new Vue({
el:'#zhq',
data:function(){
return{
ts:new Date().getTime(),
title:'hello vue!!',
dt:new Date(),
}
},
methods:{
},
//局部过滤器
filters:{
strFilter:function(v){
return v.substr(0,6).toUpperCase();
}
},
})
</script>
</html>
三、计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
案例
成绩的总分
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一 手动方式 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二 CDN -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<script src="js/date.js" type="text/javascript"></script>
</head>
<body>
<div id="zhq">
<h1>{{ts}}</h1>
<h2>计算属性</h2>
<div v-for="s in score">
编号={{s.id}},科目={{s.name}},成绩={{s.sc}}
</div>
<span >总分：{{sum}}</span>
</div>
</body>
<script>
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
var vm=new Vue({
el:'#zhq',
data:function(){
return{
ts:new Date().getTime(),
score:[
{id:1,name:'语文',sc:110},
{id:2,name:'数学',sc:90},
{id:3,name:'英语',sc:90},
{id:4,name:'物理',sc:100}
],
}
},
methods:{
},
computed:{
sum:function(){
let s=0;
for(let sc of this.score)
s+=sc.sc;
return s;
}
}
});
</script>
</html>
小结：计算属性和监听属性的区别
自己的理解
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
