vue
如何使用?
注意:后面的 html、js 代码都会以写在 body体 这里
-
先在 html 文件中导入
vue
,这时候就有一个Vue
构造函数,可以通过new
来构造一个实例-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <!-- 导入 vue.js 文件 --> </head> <body> <!-- 下面的html,js代码都会以写在这里 --> </body> </html>
-
-
创建一个 Vue 的实例
<div id='vue'> <p> { { msg }}<!-- vue 中提供的模板,和 art-template 类似 --> </p> </div> <script> let vue = new Vue({ el:'#vue', data:{ msg:'hello Vue' } }) </script>
el
:表示当前我们vue
实例在页面上控制的区域,它获取DOM对象的方式和JQuery非常类似.(String)data
:表示存放在当前我们vue
实例在页面上控制的区域中要用到的数据.(Object)
生命周期
生命周期:从 Vue 实例创建、运行、到销毁期间,总是伴随着各种各样的事件。而这些事件,统称为生命周期
生命周期钩子:就是生命周期事件的别名
其实,生命周期钩子 等同于 生命周期函数 等同于 生命周期事件
生命周期一般分为三类:
创建期间的生命周期钩子
beforeCreate
created
beforeMount
mounted
运行期间的生命周期钩子
beforeUpdate
updated
销毁期间的生命周期钩子
beforeDestroy
destroyed
请参考 vue 官网上的生命周期图片:
我们用 AJAX 请求服务器时,一般使用 created
生命周期钩子
模板
插值表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
<div id='vue'>
<p >{
{ msg }}</p>
</div>
<script>
let vue = new Vue({
el:'#vue',
data:{
msg:'hello Vue'
}
})
</script>
指令
在 vue
中所有的内置指令都会在前以 v-
开头,那 vue
中的指令又是什么呢?
指令:它们作用于 DOM 元素,提供一些特殊的用法,避免我们写太多代码,也就是说是一些封装好的特性
v-cloak
cloak(披风)
:这个指令可以用来解决网速加载很慢的时候,页面会先出现{
{}} (Mustache)
,再一闪而过出现真实的数据。(解决插值表达式闪烁的问题)
css 代码:
[v-clock] {
display: none;
}
html、js 代码:
<div id='vue'>
<p v-cloak>
{
{ msg }}
</p>
</div>
<script>
let vue = new Vue({
el:'#vue',
data:{
msg:'hello Vue'
}
})
</script>
v-text
v-text,和插值表示式功能类似,但是也是有区别的:
v-text
没有闪烁问题,而插值表达式{ {}}
有闪烁问题v-text
会覆盖元素中原本的内容,但是插值表示式并不会覆盖,因为它只会替换自己的占位符
<div id='vue'>
<p v-text='msg'><!-- v-text,和插值表示式功能类似 -->
</p>
</div>
<script>
let vue = new Vue({
el:'#vue',
data:{
msg:'hello Vue'
}
})
</script>
v-html
v-html ,会将内容按 HTML 的形式插入到标签中,而 v-text、插值表达式 都是以 字符串 的形式插入到标签中
<div id="vue" v-html='dom'>
</div>
<script>
let vue = new Vue({
el:'#vue',
data:{
dom:'<p>hello vue,I used "p" label</p>'
}
})
</script>
v-bind
v-bind 用于绑定 DOM 属性
<div id="vue">
<button v-bind:title='mytitle'>title</button>
</div>
<script>
let vue = new Vue({
el:'#vue',
data:{
mytitle : '这是v-bind的title'
}
})
</script>
注意:v-bind 后面单引号部分会以js的形式进行解析,也就是可以使用js表达式
<div id="vue">
<button v-bind:title='mytitle + `js代码解析`'>title</button>
</div>
<script>
let vue = new Vue({
el:'#vue',
data:{
mytitle : '这是v-bind的title'
}
})
</script>
简写:
可以直接是用 :
(英文冒号)表示 v-bind:
<div id="vue">
<button :title='mytitle + `js代码解析`'>title</button>
</div>
<script>
let vue = new Vue({
el:'#vue',
data:{
mytitle : '这是v-bind的title'
}
})
</script>
v-on
v-on 用于绑定事件的,v-on:
后面的事件和 jQuery
中事件很类似
注意:在 vue 中,在为元素指定处理函数的时候,如果加了小括号,就可以给函数传递参数
<div id="vue">