Vue.js 模板语法
1. 文本：{{}}
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。
div id="app">
<p>{{ message }}</p>
</div>关键代码：文本 {{}}
2. html： v-html
使用 v-html 指令用于输出 html 代码。
html :
<div id="app">
<p v-html="message"></p>
</div>javascript :
new Vue({
el: '#app',
data: {
message: '<h1>hello,vue.js!</h1>'
}
}) 关键代码： v-html 以及 {{}}
3. 属性： v-bind
HTML 属性中的值应使用 v-bind 指令。
html :
<div id="app2">
<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1" />
<br />
<div v-bind:class="{'class1': class1}">
【验证v-bind的用法】这里和class1 的属性进行了绑定。会随着class1的改变而改变。
</div>
</div>css :
<style type="text/css">
.class1{
background: #440;
color: #ee0;
}
</style>javascript :
new Vue({
el:'#app2',
data: { class1: false }
});4. 表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
html :
<div id="app3">
{{5+5}}<br />
{{ok ? 'YES' : 'NO'}} <br />
{{ message.split('').reverse().join('')}} <br />
<div v-bind:id="'list-' + id">叶莜落</div>
</div>javascript :
new Vue({
el:'#app3',
data: {
ok: true,
message: 'ye you luo',
id: 1
}
});5. 指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
html :
<div id="app4">
<p v-if="seen">现在你看到我了</p>
</div>javascript :
new Vue({
el: '#app4',
data: {
seen: true
}
});在上面的示例中，如果在JavaScript中将seen的值置为 false，则该DOM不会在浏览器中加载。
6.参数
参数在指令后以冒号指明。
例如， v-bind 指令被用来响应地更新 HTML 属性。
v-on 指令用于监听 DOM 事件。
html :
<div id="app5">
<p><a v-bind:href="url">博客园</a></p>
<p v-on:click="dosomething">绑定了点击事件</p>
</div>javascript :
new Vue({
el: '#app5',
data: {
url: 'http://www.cnblogs.com/helloIT'
},
methods:{
dosomething: function(){
alert('hello,Vue.js!')
}
}
});7.修饰符
8.用户输入: v-model
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
html ：
<div id="app6">
<p>输入的字符串： {{message6}}</p>
<input v-model="message6" />
</div>
<div id="app7">
<p>{{message7}}</p>
<button v-on:click="reverseMessage">{{message7_1}}</button>
</div>javascript :
new Vue({
el: "# app6",
data: {
message6: '叶莜落'
}
});
new Vue({
el: "#app7",
data: {
message7: '叶莜落',
message7_1: '点击翻转'
},
methods: {
reverseMessage:function(){
this.message7 = this.message7.split('').reverse().join('')
}
}
});9.过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>html :
<div id="app8">
使用过滤器让首字母大写： {{message8 | capitalize}}
</div>javascript :
new Vue({
el: '#app8',
data: {
message8: 'yeyouluo',
},
filters: {
capitalize: function(value){
if( !value ) {
return '';
}
vlue = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});注意：
①过滤器可以像管道一样串联。
②过滤器是JavaScript函数，因此可以接受参数。{{ message | filterA('arg1', arg2) }
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
10.缩写
Vue.js为两个最常用的指令提供了特别的缩写：
10.1 v-bind
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>10.2 v-on
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>Vue.js 条件语句
1.v-if
使用场景：
①html元素
②template
注：还可以使用在字符串模板引擎中，如Handlebars。
html ：
<div id="app1">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>叶莜落</h1>
<p>技术改变世界</p>
<p>梦想引领技术</p>
</template>
</div>javascript :
<script>
new Vue({
el: '#app1',
data: {
seen:true,
ok:true
}
})
</script>2.v-else
html :
<div id="app1">
<p v-if="seen">现在你看到我了</p>
<div v-else>seen对应的内容没有显示</div>
<p v-if="seen">哈哈哈</p>
<template v-if="ok">
<h1>叶莜落</h1>
<p>技术改变世界</p>
<p>梦想引领技术</p>
</template>
<template v-else>模板中的内容没有显示</template>
<p v-if="seen">嘻嘻嘻</p>
</div>javascript :
<script>
new Vue({
el: '#app1',
data: {
seen:false,
ok:false
}
})
</script>结果：
seen对应的内容没有显示
模板中的内容没有显示
总结：
①对块状元素而言，v-else对应else块。只要v-if对应的值相同，则无论多个v-if如何分散，都对应一个v-else。
②对template而言，v-else只能放在template中。
3.v-else-if
html :
<div id="app2">
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
</div>javascript :
new Vue({
el: '#app2',
data: {
type: 'D'
}
})总结：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
4.v-show
可以使用 v-show 指令来根据条件展示元素，达到v-if的效果。
html :
<div id="app3">
<h1 v-show="ok2">Hello!</h1>
</div>javascript :
new Vue({
el: "#app3",
data: {
ok2: true
}
})Vue.js 循环语句
循环语句使用v-for。
使用场景：
①html列表元素
②模板
1.单纯的html列表元素示例
html :
<div id="app1">
<ol>
<li v-for="site in sites">{{site.name}}</li>
<li>---------</li>
</ol>
</div>javascript :
new Vue({
el:'#app1',
data: {
sites: [
{name:'yeyouluo1'},
{name:'yeyouluo2'},
{name:'yeyouluo3'}
]
}
})结果：
2.模板示例
html :
<div id="app2">
<ul>
<template v-for="book in books">
<li>{{book.name}}</li>
<li>--------</li>
</template>
</ul>
</div>javascript :
new Vue({
el:'#app2',
data: {
books:[
{name: '《飘》'},
{name: '《悲惨世界》'},
{name: '《呐喊》'}
]
}
})结果：
3.v-for迭代对象
v-for 可以通过一个对象的属性来迭代数据。
3.1 迭代对象默认第一个参数为value
html :
<div id="app3">
<ul>
<li v-for="o in object">{{o}}</li>
</ul>
</div>javascript :
new Vue({
el:'#app3',
data: {
object: {
name: '百度',
url: 'https://www.baidu.com',
slogan:'百度一下，你就知道'
}
}
})结果 :
思考：如何实现一个对象数组的迭代？
3.2 迭代对象默认第二个参数为key，默认第三个参数为index
html :
<div id="app3">
<ul>
<li v-for="o in object">{{o}}</li>
</ul>
<ul>
<li v-for="(value,key) in object">{{key}} : {{value}}</li>
</ul>
<ul>
<li v-for="(value,key,index) in object">{{index}} . {{key}} : {{value}}</li>
</ul>
</div>javascript :
new Vue({
el:'#app3',
data: {
object: {
name: '百度',
url: 'https://www.baidu.com',
slogan:'百度一下，你就知道'
}
}
})结果：
4.v-for 迭代整数
html :
<div id="app4">
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>
</div>javascript :
new Vue({
el:'#app4'
})结果：
Vue.js 计算属性
Vue.js 计算属性是在Vue()构造函数中使用computed属性。
html :
<div id="app1">
<p>原始字符串：{{ message }}</p>
<p>计算后反转字符串：{{ reversedMessage }}</p>
</div>javascript :
<script type="text/javascript">
var vm = new Vue({
el: '#app1',
data: {
message: 'yeyouluo!'
},
computed: {
reversedMessage:function(){
// `this` 指向 vm 实例
return this.message.split('').reverse().join('');
}
}
})
</script>结果：
原始字符串：yeyouluo!
计算后反转字符串：!ouluoyey
①实例 中声明了一个计算属性 reversedMessage 。
②提供的函数将用作属性 vm.reversedMessage 的 getter 。computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。具体可参考《菜鸟学习》
③vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
附：computed vs methods
相同点：效果一样。
区别：
①computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
②使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。
Vue.js 样式绑定
1.1 切换多个class
可以用 v-bind 来设置样式属性。
可以在对象中传入更多属性用来动态切换多个 class 。
html :
<div id="app1">
<div v-bind:class="{active:isActive,'text-danger':hasError}"></div>
</div>css :
<style>
.active{
width:100px;
height: 100px;
background-color: green;
}
.text-danger{
background: red;
}
</style>javascript :
<script>
new Vue({
el:'#app1',
data:{
isActive: true,
hasError:true
}
})
</script>示例中css结果会叠加。
1.2 class绑定Object
可以直接绑定数据里的一个对象。
html :
<div id="app2">
<div v-bind:class="classObject"></div>
</div>css同上。
javascript :
new Vue({
el: '#app2',
data: {
classObject:{
active:true,
'text-danger':true
}
}
})1.3 class绑定计算属性
可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式。
html :
<div id="app3">
<div v-bind:class="classObject1"></div>
</div>css同上。
javascript :
new Vue({
el: '#app3',
data:{
isActive:true,
error:null
},
computed:{
classObject1:function(){
return {
active: this.isActive && !this.error,
'text-danger':this.error && this.error.type === 'fatal'
}
}
}
});1.4 数组语法
html :
<div id="app4">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>css同上。
javascript :
new Vue({
el:'#app4',
data:{
activeClass: 'active',
errorClass: 'text-danger'
}
})1.5 三元表达式切换class
可以使用三元表达式来切换列表中的 class。
html :
<div id="app5">
<div v-bind:class="[errorClass, isActive?activeClass:'']"></div>
</div>css同上。
javascript :
new Vue({
el:'#app5',
data: {
isActive:true,
activeClass: 'active',
errorClass: 'text-danger'
}
})2.1 内联样式
html :
<div id="app6">
<div v-bind:style="{color:activeColor, fontSize:fontSize + 'px'}">叶莜落</div>
</div>javascript :
new Vue({
el:'#app6',
data:{
activeColor:'green',
fontSize:30
}
})2.2 内联样式：绑定到对象
可以直接绑定到一个样式对象，让模板更清晰。
html :
<div id="app7">
<div v-bind:style="styleObject">叶莜落</div>
</div>javascript :
new Vue({
el:'#app7',
data: {
styleObject:{
color:'green',
fontSize:'30px'
}
}
})2.3 内联样式：绑定多个对象
html :
<div id="app8">
<div v-bind:style="[baseStyles,overridingStyles]">叶莜落</div>
</div>javascript :
new Vue({
el:'#app8',
data:{
baseStyles:{
color:'red',
fontSize:'30px'
},
overridingStyles:{
fontWeight:'bold'
}
}
})注： fontWeight == 'font-weight'
Vue.js 事件处理器
1. 事件监听可以使用v-on指令来绑定
html :
<!--
作者：叶莜落
时间：2017-10-18
描述：事件监听可以使用 v-on 指令
-->
<div id="app1">
<button v-on:click="counter += 1">增加1</button>
<p>这个按钮被点击了{{ counter }} 次。</p>
</div>JavaScript :
var app1 = new Vue({
el: '#app1',
data: {
counter: 0
}
});2. v-on 可以接收一个定义的方法来调用JavaScript方法
html :
<!--
作者：叶莜落
时间：2017-10-18
描述：v-on 可以接收一个定义的方法来调用JavaScript方法
-->
<div id="app2">
<button v-on:click="greet">Greet</button>
</div>JavaScript :
var app2 = new Vue({
el: '#app2',
data: {
name: 'Vue.js'
},
methods: {
greet: function(event) {
alert( 'Hello,'+ this.name + '!' );
if( event ) {
alert( event.target.tagName )
}
}
}
})3. 内联JavaScript语句
html :
<!--
作者：叶莜落
时间：2017-10-18
描述：内联JavaScript语句
-->
<div id="app3">
<button v-on:click="say('Hi')">Say Hi</button>
<button v-on:click="say('TKS')">Say TKS</button>
</div>JavaScript :
var app3 = new Vue({
el: '#app3',
methods: {
say: function( message ) {
alert(message)
}
}
})Vue.js 表单
1.text/textarea
html :
<!--
作者：叶莜落
时间：2017-10-18
描述：用v-model绑定数据--普通表单元素text/textarea
-->
<div id="app1">
<p>input 元素</p>
<input type="text" v-model="message" placeholder="编辑我……"/>
<p>消息是：{{message}}</p>
<p>textarea元素：</p>
<p style="white-space: pre">{{message2}}</p>
<textarea cols="30" rows="10" v-model="message2" placeholder="多行文本输入……"></textarea>
</div>javascript :
var app1 = new Vue({
el: '#app1',
data: {
message: '叶莜落',
message2: 'https://yeyouluo.github.io'
}
})2.复选框
html :
<div id="app2">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked"/>
<label for="checkbox">{{checked}}</label>
<p>多个复选框：</p>
<input type="checkbox" id="google" value="google" v-model="checkedNames"/>
<label for="google">google</label>
<input type="checkbox" id="baidu" value="baidu" v-model="checkedNames"/>
<label for="baidu">baidu</label>
<input type="checkbox" id="sogo" value="sogo" v-model="checkedNames"/>
<label for="sogo">sogo</label>
<br />
<p>选择的值为：{{checkedNames}}</p>
</div>javascript :
var app2 = new Vue({
el: '#app2',
data: {
checked: true,
checkedNames: []
}
})3.单选框
html :
<div id="app3">
<input type="radio" id="baidu" value="baidu" v-model="picked"/>
<label for="baidu">百度</label>
<br />
<input type="radio" id="google" value="google" v-model="picked"/>
<label for="google">谷歌</label>
<br />
<p>选中值为：{{picked}}</p>
</div>javascript :
var app3 = new Vue({
el: '#app3',
data: {
picked: 'google'
}
})4.下拉列表
html :
<div id="app4">
<select name="fruit" v-model="selected">
<option value="">选择一个网站</option>
<option value="www.baidu.com">Baidu</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">选择的网站是：{{ selected }}</div>
</div>javascript :
var app4 = new Vue({
el: '#app4',
data: {
selected: ''
}
})Vue.js 组件：自定义html 和 事件
组件可以扩展 HTML 元素，封装可重用的代码。
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：<tagName></tagName>
1. 全局组件
所有实例都能用全局组件。
html :
<div id="app1">
<yeyouluo></yeyouluo>
</div>javascript :
//注册
Vue.component('yeyouluo',{
template: '<h1>自定义全局组件！</h1>'
})
// 根实例
var app1 = new Vue({
el: '#app1'
})总结 ：
①使用Vue.component注册
②使用<tagName></tagName>调用
2. 局部组件
在实例选项中注册局部组件，组件只能在这个实例中使用。
html :
<div id="app2">
<github></github>
</div>javascript :
var child = {
template: '<h1>自定义局部组件：https://yeyouluo.github.io</h1>'
}
var app2 = new Vue({
el: '#app2',
components: {
// <github> 将只在父模板可用
github: child
}
})总结 ：
①注册局部组件就是定义了一个变量。
②在Vue实例components属性中绑定tagName和上面定义的变量。