目录:
1. 模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom, 结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
html模板语法: 这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。
data: {
html: '<input type="text" value="hello"/>'
}
<span v-html="html"></span>
HTML属性中的值应使用v-bind指令。类型与jQuery中的$("#xxx").attr(propName, propVal) 示例,以修改元素的class属性为例: 定义一个样式
<style>
.redClass {
font-size: 30px;
color: red;
}
</style>
在data中定义一个属性,其值为上面定义的样式名
data: {
red: 'redClass'
}
在html使用v-bind指令设置样式
<p>设置之前: aaaa</p>
<p>设置之后: <span v-bind:class="red">aaa</span></p>
<span>{{str.substr(0,6).toUpperCase()}}</span>
data: {
str: 'hello vue'
}
<span>{{ number + 1 }}</span>
data: {
number: 10
}
<span>{{ ok ? 'YES' : 'NO' }}</span>
data: {
ok: true
}
<p>
<input type="text" v-bind:id="bookId"/></br>
<!--动态生成Id-->
<input type="text" v-bind:id="'bookList_' + id"/>
</p>
data: {
bookId: 'book001',
id: 'book002'
}
<div v-if="type === 'A'">
type == A
</div>
<div v-else-if="type === 'B'">
type == B
</div>
<div v-else>
other value
</div>
var vm = new Vue({
el: '#app',
data: {
type: 'C'
}
});
注: js = == === 之间的区别 一个等号是赋值操作,==先转换类型再比较,===先判断类型,如果不是同一类型直接为false alert(1 == “1”); // true alert(1 === “1”); // false
<div v-show="show === 'yes'">
show == yes
</div>
var vm = new Vue({
el: '#app',
data: {
show: 'yes'
}
});
<!--数组-->
<div v-for="item in items">
{{item.name}} -- {{item.id}}
</div>
<!--循环生成下拉列表-->
<div>
<select >
<option v-for="item in items"
v-bind:value="item.id">{{item.name}}</option>
</select>
</div>
<!--对象-->
<div v-for="(o,key) in obj">
{{key}}-{{o}}
</div>
var vm = new Vue({
el: '#app',
data: {
itmes:[
{name: 'zs',age:18},
{name: 'ww',age:19},
{name: 'ls',age:20},
{name: 'zl',age:21}
],
obj: {
name:'张三',
age: 21,
addr: '湖南长沙'
}
}
});
<!--
循环生成一组多选按钮,v-model通过vue的双向绑定将用户选择的项保存到
定义的selected组数中
-->
<div v-for="(item,index) in items">
{{index}}:<input type="checkbox" v-bind:value="item.id"
v-model="selected">{{item.name}}
</div>
<button v-on:click="getSelected()">获取选择</button>
var vm = new Vue({
el: '#app',
data: {
type: 'C',
show: 'no',
items:[
{name: '长沙',id:18},
{name: '昆明',id:19},
{name: '武汉',id:20},
{name: '南京',id:21}
],
obj: {
name:'张三',
age: 21,
addr: '湖南长沙'
},
selected:[]
},
methods: {
getSelected: function() {
console.log(this.selected);
}
}
});
<!--参数:href-->
<div>
<a v-bind:href="url">baidu</a>
</div>
<!--
参数:动态参数.
attname需要在data中定义,
注意:attname要全部小写!!
-->
<div>
<a v-bind:[attrname]="url">baidu</a>
<button v-on:[evname]="clickme">点我看看</button>
</div>
注意:在动态参数中,作为参数的变量名(如:attrname)要全部小写,否则无效 !!
var vm = new Vue({
el: '#app',
data: {
url: 'https://www.baidu.com',
attrname:'href',
evname: 'click'
},
methods: {
clickme: function() {
console.log("点到我了");
}
}
});
指令 | 简写 | 示例 |
---|---|---|
v-bind:xxx | :xxx | v-bind:href 简写为 :href |
v-on:xxx | @xxx | v-on:click 简写为 @click |
2. 过滤器
var vm = new Vue({
filters: {
'filterName': function(value) {
//过滤器实现
}
}
});
<!--双花括号中的使用-->
{{ name | capitalize }}
<!--在 v-bind 指令中的使用-->
<div v-bind:id="rawId | formatId"></div>
<div>
<p>{{msg | toUpperCase}}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
msg:"hello vue"
},
//局部过滤器
filters:{
toUpperCase: function(value) {
return value.toUpperCase();
}
}
});
//全局过滤器
Vue.filter('fmtDate',function(value) {
return fmtDate(value, 'yyyy年MM月dd日')
});
<div>
<p>{{date | fmtDate}}</p>
</div>
3. 计算属性
computed:{
xxx:function(){
}
}
var vm = new Vue({
el: '#app',
data: {
//定义测试数据
books: [
{name:'红楼梦', price:"120"},
{name:'三国演义', price:"100"},
{name:'水浒传', price:"90"},
]
},
//计算属性
computed: {
compTotal: function() {
let sum = 0;
for(index in this.books) {
sum += parseInt(this.books[index].price);
}
return sum;
}
}
});
<div v-for="book in books">
{{book.name}} -> {{book.price}}
</div>
<div>
总价:{{compTotal}}
</div>
关于var 与 let
4.监听属性
watch: {
xxxx: function(val) {
//监听器实现
}
}
var vm = new Vue({
el: '#app',
data: {
m: 1,
cm: 100
},
//设置监听属性
watch: {
m: function(val) {
if(val)
this.cm = parseInt(val) * 100;
else
this.cm = "";
},
cm: function(val) {
if(val)
this.m = parseInt(val) / 100;
else
this.m = "";
}
}
});
什么是数据双向绑定?
vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具(如redux)的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突,我们可以这么解决。
为什么要实现数据的双向绑定?
<div>
<!--注意v-model的双向绑定-->
米: <input type="text" v-model="m">
厘米: <input type="text" v-model="cm">
</div>