一、了解vue
Vue.js 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
1.vue.js起步
每个 Vue 应用都需要通过实例化 Vue 来实现。、
语法格式如下:
var vm = new Vue({
// 选项
})
在 Vue 构造器中有一个el
参数,它是 DOM 元素中的 id
。
data
用于定义属性。
methods
用于定义的函数,可以通过 return 来返回函数值。
{{ }}
用于输出对象属性和函数返回值。
<div id="vue_det">
<h1>hello:{{ hello }}</h1>
<h1>world:{{ world() }}</h1>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#vue_det",
data:{
hello:"world"
},
methods:{
world:function(){
return this.hello+" you like ";
}
}
})
</script>
data
对象中的属性的值发生改变时,html 视图将也会产生相应的变化(所有引用这个属性值都会变成修改后的值)。
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $
,以便与用户定义的属性区分开来。
document.write(vm.$data === data) // true
document.write(vm.$el === document.getElementById('vue_det')) // true
2.vue.js模板语法
指令是带有 v-
前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。
(1)文本插值 {{}}
(2)v-html指令用于输出代码:
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>hello world</h1>'
}
})
</script>
(3)v-bind
绑定属性和数据 ,可以是class、id、herf等等属性。缩写::
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
(4)v-if
指令将根据表达式的值(true 或 false )来决定是否插入某个元素。
(5)v-on
指令,它用于监听 DOM 事件。缩写:@
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
(6)v-model
指令实现双向数据绑定。
v-model
指令用来在 input、select、textarea、checkbox、radio
等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。 若用在除了表单控件以外的标签是没有任何效果的。
但是,当{{}}没有值的时候,显示空。
3.vue.js过滤器 ——filters
Vue.js 允许自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
过滤器可以串联:
{{ message,message1,message2… | filterA | filterB |… }}
过滤器是 JavaScript 函数,因此可以接受参数:
{{ message | filterA('arg1', arg2) }}
这里,message 是第一个参数,字符串 ‘arg1’ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
<div id="app">
{{ message | capitalize(1)}|a}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'message'
},
filters: {
capitalize: function (value1,value2) {
if (!value1) return ''
value1 = value1.toString()//value1就是message
return value1+value2//value2就是1
}
a:function(value){
!!!注意: value就是capitalize的返回值!!!
// ……
}
}
})
</script>
二、vue.js判断循环
1.vue.js条件语句
(1)v-if
指令将根据表达式的值(true 或 false )来决定是否插入某个元素。
(2)v-else
指令给 v-if
添加一个 “else” 块。
(3)v-else-if
用作 v-if
的 else-if
块。
(4) v-show
指令是根据条件是否展示元素。
<h1 v-show="ok">Hello!</h1>
这里的 ok 参数值和 JavaScript 中的判断一致,为 0、null、undefined、false 时为假,其他值为真。
●v-if 和 v-show 区别:
v-if
是动态添加,当值为 false 时,是完全移除该元素,即 dom 树中不存在该元素。
v-show
仅是隐藏 / 显示,值为 false 时,该元素依旧存在于 dom 树中。若其原有样式设置了 display: none
则会导致其无法正常显示。
注意:当 <template>
元素被包含在已被 vue 实例化之后的组件中时浏览器会正常渲染 ,可以用 v-if="false"
隐藏,浏览器不会解析,但不能使用 v-show
,因为未被实例化时是(默认)display:none
。
2.vue.js循环语句
循环使用 v-for
指令。
v-for
指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
(1)数组
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
结果:数组输出列表
1.Runoob
2.Google
3.Taobao
(2)模板
<ul>
<template v-for="site in sites">
<li>{{ site.name }}</li>
</template>
</ul>
(3)对象
1个参数,第一个是属性值:
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '小明',
age:15,
like:'蛋糕'
}
}
})
</script>
结果:
●小明
●15
●蛋糕
2个参数,第二个是属性(键名):
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
3个参数,第三个是索引:(从0开始)
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
(4)整数
<div id="app">
<ul>
<li v-for="n in 10"> //从1开始!!!
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
如果有迭代属性,就会进行升序(从小到大)排序:
new Vue({
el: '#app',
data: {
object: {
2: '哈哈!',
1: 'O(∩_∩)O哈哈~',
0: '哈哈哈。。。'
}
}
})
三、vue.js样式
1.Vue.js class
class
与 style
是 HTML 元素的属性,用于设置元素的样式,可以用 v-bind
来设置样式属性。
Vue.js v-bind
在处理 class
和 style
时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
对象
设置一个对象:(text-danger
是一个关键字,要表示自定义得加引号)
<div v-bind:class="{ active: isActive }"></div>
//一样
<div class="active"></div>
多个对象:
<div class="static active text-danger"></div> //以下相同
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
})
</script>
也可以这样:
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': true
}
}
})
</script>
注意:多个class是并列的关系,所以是否覆盖属性要看style的顺序。
数组
<div class="active text-danger"></div>
同下:
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
三元表达式:
//errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
2.Vue.js style(内联样式)
在 v-bind:style
直接设置样式。
方式:键:值
,对象
或者数组
。
动态调节:
<div id="app">
<div v-bind:style="{color: 'red', fontSize: size + 'px'}">可以动态调节</div>
<div v-bind:style="computedStyle">可以动态调节</div>
<div v-bind:style="objectStyle"> 可以动态调节</div>
<div v-bind:style="methodStyle()"> 可以动态调节</div>
{{size}}
<button @click="++size">+</button>
<button @click="--size">-</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: 20,
objectStyle: {
color: 'green',
fontSize: 20 + 'px' //this.size为undefined
}
},
methods:{
methodStyle: function(){
return {color: 'green', fontSize: this.size + 'px'}
}
},
computed: {
computedStyle: function(){
return {color: 'red' , fontSize: this.size + 'px'}
}
},
watch: {
size: function(){
this.objectStyle.fontSize = this.size + 'px'
}
}
})
</script>
注意几个点:
1.在 data里面调用 data 的数据是 undefined(不明确)的——即data里存在对象,对象的属性名尽量不要和data的数据重名;
2.methods
是方法,方法名后面要加括号();
3.要改变data里对象的属性值,可以用watch
监听属性。