前言:最近开始学习VUE这套框架,经过近半个月的摸索,发现VUE这套框架确实好,轻量,简单,易用,强大...
作为一个主攻后端的程序员,为了避免前端框架学了用得少忘得快,在此开篇总结.
目录
扫描二维码关注公众号，回复：
8515964 查看本文章
1.页面渲染
1.1声明式渲染
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})1.2条件/循环渲染
#条件渲染,使用v-if
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})#循环渲染,使用v-for
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})1.3绑定(v-on/v-bind/v-model)
vue中使用v-bind绑定HTML属性,使用v-on绑定HTML事件,使用v-model双向绑定数据.
其中v-bind可以简写为冒号 : ,v-on可以简写为@
eg:
#v-bind 传统写法
<div id="app">
<a v-bind:href="url">点击跳转到百度</a>
</div>
var app = new Vue({
el: '#app',
data: {
url: 'https://www.baidu.com'
}
})
#v-bind 简写
<div id="app">
<a :href="url">点击跳转到百度</a>
</div>#v-on传统写法:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="change">改变内容</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
change: function () {
this.message = 'hello laohan!'
}
}
})
#v-on简写
<div id="app-5">
<p>{{ message }}</p>
<button @click="change">改变内容</button>
</div>vue中的一大亮点,v-model双向绑定,将view和model互相绑定,极大减少了对dom操作的代码量.
#v-model 数据双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})2.组件
2.1介绍
组件是vue中的另一大特色,任何复杂的页面都可以被拆分成小的模块,也就是一个个小的组件,各个组件分工协调最终构成一个完整的页面,组件化可以让页面解耦,降低实现复杂度,便于多个开发者分工合作开发等诸多好处.
2.2实现
这里以全局组件为例:
通过Vue.component('组件名',{...})来定义自定义组件,定义后可以在页面里通过<组件名></组件名>引用.
<div id="app">
<hello :content="msg"></hello>
</div>
<script>
Vue.component('hello',{
props:['content'],
template: '<h3>{{content}}</h3>'
});
var vm = new Vue({
el: '#app',
data: {
msg:'hello world!'
},
})
</script>2.3实例的生命周期钩子
非常重要,可以在实例所处的不同生命周期挂载不同的函数实现一些功能,这里直接援引官方的一张图,用到时可以直接打开看:
2.4模板语法
一般情况下我们在页面中通过插值表达式{{xxx}}来将数据进行渲染,除此之外我们还可以通过模板语法来进行数据渲染.
#插值表达式也可以用v-text代替,显示效果一样
<div v-text="dataName"></div>
#v-once 执行一次性地插值，当数据改变时，插值处的内容不会更新
<span v-once>这个将不会改变: {{ msg }}</span>#v-html 渲染dataName所指定的数据,会将dataName中的html标签进行转义后显示.
<div v-html="dataName"></div>
var vm = new Vue({
el: '#app',
data: {
dataName:'<h1>hello world!</h1>'
},
})#在插值表达式和模板语法中都可以使用Java script的语法:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-text="dataName + 'hi' "></div>2.5 计算属性和侦听属性(computed/watch)
可以通过computed来进行侦听数据的改变和进行实时运算,computed中所涉及的任意一项数据一旦发生改变会立即出发computed,如果数据未发生改变,则computed只在页面第一次加载时执行,接下来会从缓存中取computed后的值.
<div id="demo">{{ fullName }}</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...2.6 class与style绑定
2.6.1使用对象语法进行绑定:
对象语法:<div v-bind:class={active:isActive}></div> 如果isActive为true的话,就会将其渲染为<div class="active"></div>
#示例:
<div class="static" v-bind:class="{active:isActive,'text-danger':hasError}"></div>
data:{
isActive:true,
hasError:false
}
#渲染结果:
<div class="static active"></div>
#当然你也可以写成下面这种方式:
<div class="static" v-bind:class="{classObj}"></div>
data:{
classObj:{
isActive:true,
hasError:false
}
}
#也会经常与计算属性结合在一起使用:
data: {
isActive: true,
error: null
},
computed: {
classObj: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}2.6.2使用数组语法绑定
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}2.6.3用在组件上(不会覆盖组件原有的class)
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
<my-component v-bind:class="{ active: isActive }"></my-component>
渲染后的效果为:
<p class="foo bar active">Hi</p>
2.6.4绑定内联样式
#对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
#同样也可以写成这种形式:
<div v-bind:style="styleObj"></div>
data: {
styleObj: {
color: 'red',
fontSize: '13px'
}
}#数组语法
#v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>2.7 条件渲染
2.7.1 v-if
可以使用v-if="xx"来渲染,当xx中的值为true时即会被渲染,当有多个元素要被同一个条件同时渲染时,可以使用<template>标签进行包裹.
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>2.7.2 v-else-if,v-else
#v-else-if/v-else 值得注意的是v-else-if必须紧跟v-if,v-else必须紧跟v-else-if或v-if,否则将失效.
<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>2.7.3使用key管理可复用的元素
vue会尽可能地复用已经渲染过的相同元素,而不是重新渲染,这样可以加快页面渲染的速度,但有些时候我们需要不复用已渲染过的相同元素,这时候我们需要为之添加唯一的key来保证其不会被复用.
#现在<input>不会被复用,<label></label>仍会被复用.
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>2.7.4 v-if/v-show
v-if如果值为false,会将标签内的内容彻底给注释掉,当你使用谷歌浏览器的F12开发者工具查看时发现页面中对应的元素标签已消失.
v-show如果值为false,则只会把元素的属性设置为:display="none",因此如果元素需要被频繁的隐藏和显示,用v-show性能更好一些.
2.7.5 v-if和v-for
官方不推荐v-if和v-for一起使用,如果非用不可,记住v-for的优先级要高于v-if.
2.8列表渲染
#语法
item in items
#示例
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果
.Parent-0-Foo
.Parent-1-Bar
类似于v-if,也可以用<template></template>标签进行包裹,以此来循环渲染多个元素.
2.9事件处理
v-on绑定一些事件,常用的比如v-on:click
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})还可以通过绑定一些修饰符来完成特定功能:
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">2.10表单输入绑定
可以使用v-model实现数据双向绑定.
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>#绑定复选框
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})还可以通过一些修饰符对数据绑定做一些增强,比如.trim .number
#将用户输入的值转为数字
<input v-model.number="age" type="number">
#自动过滤用户输入的空格
<input v-model.trim="msg">2.11组件基础
前面起步阶段已有提到过组件,组件的重要性这里不再赘述了.
#语法
Vue.component('my-component-name', { /* ... */ })这种方法注册的组件都是全局组件,可以被引用在根组件内的任意位置,通过这种方式注册的组件之间内部也可以互相调用.
局部组件的定义:
#语法
var ComponentA = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
}
})在模块系统中局部注册:
#在ComponentB中引入:
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了VUE基础部分知识暂时总结到这里,下篇深入总结一下组件,以及一些难点和易犯错的语法.
