一、什么是vue?
在为 AngularJS 工作之后,Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分,构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内,Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时,在 JavaScript 框架/函数库中,Vue 所获得的星标数已超过 React,并高于 Backbone.js、Angular 2、jQuery 等项目。 Vue.js 是一款流行的 JavaScript 前端框架,目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层,同时,它也能方便地获取数据更新,实现视图与模型的交互。二、vue版Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- {{}} 插值表达式,声明式渲染,绑定vue中的data数据 -->
{{ message }}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
//绑定vue作用的范围
el: '#app',
//定义页面中显示的模型数据
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>
结果:
这就是声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
这里的核心思想就是没有繁琐的DOM操作,例如jQuery中,我们需要先找到div节点,获取到DOM对象,然后进行一系列的节点操作
其中的
也可以写成
三、基础语法
(1)、单向数据绑定 v-bind v-bind 特性被称为指令。指令带有前缀 v- 除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号 (:)(2)、双向数据绑定 v-model
什么是双向数据绑定?
- 当数据发生变化的时候,视图也会跟着发生变化
- 数据模型发生了改变,会直接显示在页面上
- 当视图发生变化的时候,数据也会跟着同步变化
- 用户在页面上的修改,会自动同步到数据模型中去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="keyword">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="keyword">
<p>您要查询的是:{{keyword}}</p>
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
//绑定vue作用的范围
el: '#app',
//定义页面中显示的模型数据
data: {
name: 'Helen',
keyword: 'yqw'
}
})
</script>
</body>
</html>
(3)、事件
使用 v-on 进行事件处理,v-on:click 表示处理鼠标点击事件,事件调用的方法定义在 vue 对象声明的 methods 节点中
<div id="app">
<button v-on:click="show()">查询</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
show() {
console.log(new Date())
}
}
})
</script>
v-on 指令的简写形式
<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>
4、修饰符
修饰符是以半角句号 (.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。 例如, .prevent 修饰符告诉 v-on 指令:阻止表单默认的提交行为5、条件渲染
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>
点击复选框,显示或隐藏协议内容。分别使用 v-if 和 v-show 实现
<div id="app">
<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令:还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if:协议内容.</h1>
<h2 v-else>no</h2>
<!-- v:show 条件指令 初始渲染开销大 -->
<h3 v-show="ok">show:协议内容.</h3>
<h4 v-show="!ok">no</h4>
</div>
6、列表渲染
v-for:列表循环指令<div id="app">
<table style="border:1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: [
{ username: 'helen', age: 18 },
{ username: 'peter', age: 28 }
]
}
})
</script>
7、实例生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会 比如 created 钩子可以用来在一个实例被创建之后执行代码:new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
8、生命周期钩子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期方法</title>
<!--引入vue框架-->
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
message:"你好"
},
methods:{
say:function () {
console.log("yqw");
}
},
beforeCreate:function () {
/*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
console.group("-----------beforeCreate 创建前状态-----------")
console.log(this.message); // undefined
this.say(); // this.say is not a function
console.log(this.say);
console.groupEnd()
},
created:function () {
/*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
* 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
*/
console.group("-----------created 创建完毕状态-----------")
console.log(this.message); // 你好
this.say(); // yqw
console.log(this.say);
console.groupEnd()
},
beforeMount:function () {
/*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
console.group('----------beforeMount 挂载前状态--------')
console.log(document.querySelector("p").innerText); // {{message}}
console.log(document.querySelector("p").innerHTML); // {{message}}
console.groupEnd()
},
mounted:function () {
/*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
console.group('----------mounted 挂载结束状态--------')
console.log(document.querySelector("p").innerText); // 你好
console.log(document.querySelector("p").innerHTML); // 你好
console.groupEnd()
},
beforeUpdate:function(){
/*主要data中的数据发生了变化就会执行
* 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
*
* */
console.group('----------beforeUpdate 更新前状态--------')
console.log(this.message);
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
console.groupEnd()
},
updated:function () {
/*主要data中的数据发生了变化就会执行
* 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
*
* */
console.group('----------updated 更新完成状态--------')
console.log(this.message);
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
console.groupEnd()
},
beforeDestroy:function(){
/*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
* 最后能使用Vue实例的地址
* */
console.group("-----------beforeDestroy 销毁前状态-----------")
console.log(this.message);
this.say();
console.log(this.say);
console.groupEnd()
},
destroyed:function () {
/*
* 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
* */
console.group("-----------destroyed 销毁完成状态-----------")
console.log(this.message);
this.say();
console.log(this.say);
console.groupEnd()
}
})
</script>
</body>
</html>
结果:
在控制台里输入以下命令来改变message的值,会看到data中的数据改变后将触发update操作
app.message='update’
输入**app.$destory()**命令对vue实例进行销毁
再次改变message的值,但却不会在触发update了,说明vue实例是真的被销毁了。
9、vue的路由
作用:Vue.js 路由允许我们通过锚点定义不同的 URL, 达到访问不同的页面的目的,每个页面的内容通过延迟加载渲染出来。 通过 Vue.js 可以实现多视图的 单页Web应用(single page web application,SPA) 实例:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过传入 `to` 属性指定链接. -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
// 1. 定义(路由)组件。
// 复杂的组件也可以从独立的vue文件中引入
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
new Vue({
el: '#app',
router
})
// 现在,应用已经启动了!
</script>
</body>
</html>