Vue 5小时学习小教程
Vue
Vue
Vue是一套用于构建用户界面的渐进式框架, Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue是一个JavaScript MVVM库, 以数据驱动和组件化的思想构建。
本来想学jQuery来着, 但是同事推荐直接学习Vue,所以入了Vue的坑。
数据驱动
jQuery了解了下, jQuery操作元素先是获取元素DOM对象, 然后进行元素操作 , 在Vue中, 元素和数据是双向绑定的, 在实例化Vue对象的同时将元素绑定,数据和元素保持同步, 数据发生改变, 对应页面的元素也会发生改变。
MVVM模式
Model-View-ViewModel
Model: 指的是数据部分,对应到前端相当于JavaScript对象
View: 视图部分,对应前端就是DOM
ViewModel: 连接数据和视图的中间件
数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据变化的时候，ViewModel能够监听到这种变化，并及时的通知View做出修改。同样的，当页面有事件触发时，ViewModel也能够监听到事件，并通知Model进行响应。ViewModel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。
起步
从经典的hello world开始
//创建view
<div id="app">{{ message }}</div>
<script>
//创建model
var example = {
message: 'hello world'
}
//创建vue实例, 绑定元素- ViewModel
new Vue({
el: '#app',
data: example
})
</script>
建立关联之后,页面和数据都是响应式的, 我们在JavaScript的控制台修改app.message的值,页面也会随之发生变化。
指令
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。
v-bind
v-bind会绑定元素的某个特殊特性
<div id="app2">
<span v-bind:title="message">
鼠标悬停几秒种查看此处动态绑定的提示信息!
</span>
</div>
<script>
new Vue({
el: "#app2",
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
</script>
v-if
v-if是条件渲染指令, 根据表达式的真假来删除或插入元素
v-if= ‘expression’ expression是一个返回bool的表达式, 表达式可以是个bool属性, 也可以是个返回bool的运算式
<div id="app3">
<p v-if="seen">你可以看到我</p>
<p v-if="name.indexOf('jack')>=0">{{ name }}</p>
</div>
<script>
new Vue({
el: '#app3',
data: {
seen: true,
name: 'jacklove'
}
})
</script>
v-for
v-for用来循环渲染, 可以绑定数组的数据来渲染一个项目列表
<div id="app2">
<ol>
<li v-for="todo in todos">{{ todo }}</li>
</ol>
</div>
<script>
new Vue({
el: '#app2',
data: {
todos:[
{todo: '上课'},
{todo: '做实验'},
{todo: '下课'}
]
}
})
</script>
v-on
v-on用来监听DOM事件
<div id="app3">
<p>{{ message }}</p>
<button type="button" v-on:click="changeMessage">改变信息</button>
</div>
<script>
new Vue({
el: '#app3',
data: {
message: 'hello'
},
methods: {
changeMessage: function () {
this.message = 'world'
}
}
})
</script>
v-model
v-model在表单元素上创建双向数据绑定
无论是修改input的值还是p标签的值, 相应的两边的值都会更新
<div id="app4">
<p>{{ message }}</p>
<input type="text" v-model="message">
</div>
<script>
new Vue({
el: '#app4',
data: {
message: 'hello'
}
})
</script>
v-bind和v-on缩写
Vue.js为最常用的两个指令v-bind和v-on提供了缩写的方式
v-bind 可以缩写成一个冒号
v-on可以缩写成@符号
<span :title="message">
鼠标悬停几秒种查看此处动态绑定的提示信息!
</span>
<button type="button" ="changeMessage">改变信息</button>
搭建Vue开发环境
- 安装node.js
- 安装vue脚手架 npm install –global vue-cli
- 创建项目 cd到对应项目
vue init webpack vue-demo1 - npm install / cnpm install 安装依赖
- npm run dev
另一种创建项目的方式: (更精简)
- 安装node.js
- 安装vue脚手架 npm install –global vue-cli
- 创建项目 cd到对应项目
vue init webpack-simple vue-demo1 - npm install / cnpm install 安装依赖
- npm run dev
vue项目结构
-node_modules: npm 加载的项目依赖模块
-src: 项目开发目录文件
—assets: 放置一些图片，如logo等。
—app.vue: 项目入口文件, 我们也可以直接将组件写这里
—main.js: 项目的核心文件
-static: 静态资源目录, 如图片 字体等
-test: 初始初始目录, 可删除
-.xxxx文件: 配置文件
-index.html: 首页入口文件
-package.json: 项目配置文件
-README.md: 项目的说明文档
Vue开始
数据绑定, 绑定属性 循环渲染数据
v-for
绑定属性, 绑定class, 绑定style
v-bind
直接显示html
v-html
绑定style
v-bind: class
<div>
<ul v-for="(item, key) in list" v-bind:class="{'red':key==0, 'blue':key==1}">
<li>{{ item }}</li>
</ul>
</div>
v-bind:style
<div class="box" :style="{width: boxWidth+'px'}">
这是个div
</div>
双向数据绑定, Vue中ref获取dom节点
<div ref="userinfo">{{ text }}</div>
<input type="text" v-model="text">
<button type="button" v-on:click="getmsg()">点击显示msg</button>
<button type="button" v-on:click="setmsg()">点击设置</button>
<script>
export default {
name: 'app',
methods:{
getmsg(){
alert(this.msg)
},
setmsg(){
this.$refs.userinfo.textContent = "who am i"
}
}
</script>
vue事件 定义方法 执行方法 获取数据 改变数据 事件对象
v-on绑定事件
两种方法定义及执行
<button v-on:click="run1()">执行方法的第一种</button>
<button @click="run2()">执行方法的第二种</button>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
run1:function(){
alert('执行方法的第一种')
},
run2(){
alert('执行方法的第二种')
}
}
}
</script>
获取data数据
直接使用this获取
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
getmsg(){
alert(this.msg)
}
}
}
</script>
事件对象event
<button type="button" ="eventfn($event)" data-aid="123">event</button>
eventfn(e){
console.log(e)
// e.srcElement 获取dom节点
e.srcElement.style.background = 'red';
}
e.srcElement 获取当前dom节点
e.srcElement.dataset 获取自定义属性的值
Vue事件结合双向数据绑定实现TODOlist
<template>
<!-- vue模板里面 所有的内容都要被一个根节点包含起来-->
<div id="app">
<input type="text" v-model="todo" @keydown="insertTodo($event)">
<hr>
<h2>正在进行</h2>
<br>
<ul>
<li v-for="(item,key) in todoList" v-if="!item.checked">
<input type="checkbox" v-model="item.checked"> {{ item.title }} <button @click="deleteTodo(key)" type="button">delete</button>
</li>
</ul>
<br>
<h2>已完成</h2>
<br>
<ul>
<li v-for="(item,key) in todoList" v-if="item.checked">
<input type="checkbox" v-model="!item.checked"> {{ item.title }} <button @click="deleteTodo(key)" type="button">delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
todo: '',
todoList:[
]
}
},
methods: {
insertTodo(e){
if(e.keyCode == 13){
var todoObj = {
"title": this.todo,
"checked": false
}
this.todoList.push(todoObj);
this.todo='';
}
},
deleteTodo(key){
this.todoList.splice(key, 1);
}
}
}
</script>
Vue中的模块化及封装Storage组件实现本地保存
使用loaclStorage来实现本地保存
localStorage.setItem(key, value)
localStorage.getItem(key)
封装storage.js, 在src目录下新建model文件夹, 然后新建storage.js文件
storage.js
// 封装localstorage本地存储的操作 模块化的文件
var storage={
set(key, value){
localStorage.setItem(key, JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
}
}
export default storage;
在前端引入storage.js并使用
<script>
import storage from './model/storage'
export default {
name: 'app',
data () {
return {
todo: '',
todoList:[
]
}
},
methods: {
insertTodo(e){
if(e.keyCode == 13){
var todoObj = {
"title": this.todo,
"checked": false
}
this.todoList.push(todoObj);
this.todo='';
}
// localStorage.setItem('list', JSON.stringify(this.todoList));
storage.set('list', this.todoList)
},
deleteTodo(key){
this.todoList.splice(key, 1);
storage.set('list', this.todoList)
},
save(){
storage.set('list', this.todoList)
}
},
/* 生命周期函数 页面刷新会触发的方法*/
mounted(){
var list = storage.get('list');
if(list){
this.todoList = list
}
}
}
</script>
Vue组件 生命周期函数
在Vue中, 所有的页面都是由组件组成, 组件中包含了HTML,CSS,JavaScript, 组件就是可复用的Vue实例
在src目录下新建文件夹component文件夹来存放组件, 组件名首字母大写,以.vue结尾
<template>
<!-- 所有的内容都要被根节点包含起来-->
<div>
</div>
</template>
Vue组件使用:
- 引入组件
- 挂载组件
- 在模板中使用
Home.vue
<template>
<div>
<h2>这是一个首页组件</h2>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
App.vue
<template>
<!-- vue模板里面 所有的内容都要被一个根节点包含起来-->
<div id="app">
<v-home></v-home>
</div>
</template>
<script>
import storage from './model/storage';
/*
1. 引入组件
2. 挂载组件
3. 在模板中使用
*/
import Home from './components/Home.vue';
export default {
name: 'app',
data () {
return {
}
},
// 挂载组件
components:{
'v-home': Home
}
}
</script>
Vue完整的生命周期
vue的生命周期
strong text
生命周期函数:
组件挂载以及组件更新,组件销毁的时候触发的一系列的方法, 这些方法就叫生命周期函数
beforeCreate(){
console.log('实例创建之前');
},
created(){
console.log('实例创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
/* 请求数据 操作dom放在这个里面 mounted 重要*/
console.log('模板编译完成');
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
beforeDestroy(){
/* 页面销毁的时候要保存一些数据, 就可以监听这个生命周期函数 */
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
}
注意: 用的比较多的函数是mounted和beforeDestroy,
mounted: 请求数据 操作dom放在这个里面
beforeDestroy: 页面销毁的时候要保存一些数据, 就可以监听这个生命周期函数
Vue请求数据
vue-resource
官方提供的插件, 使用步骤
- vue-resource : 使用 npm install vue-resource –save 安装
- man.js 引入
import VueResource from ‘vue-resource’
Vue.use(VueResource)
- 使用
getData: function () {
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
//传统写法
this.$http.get(api).then(function (response) {
console.log('请求完成');
console.log(response);
}, function (err) {
console.log('请求失败');
console.log(err)
})
//lambda写法
this.$http.get().then((response) => {
//成功回调
}, (error) => {
//错误回调
})
}
支持的HTTP方法和options
vue-resource请求API按照REST风格, 提供了7种API
- get( url, [options] )
- head(url, [options])
- delete(url, [options])
- jsonp(url, [options])
- post(url, [body], [options])
- put(url, [body], [options])
- patch(url, [body], [options])
options对象
发送请求时的options对象包含以下属性
| 参数 | 类型 | 描述 |
| url | string | 请求的URL |
| method | string | 请求的HTTP方法，例如：’GET’, ‘POST’或其他HTTP方法 |
| body | Object, FormData string | request body |
| params | Object | 请求的URL参数对象 |
| headers | Object | request header |
| timeout | number | 单位为毫秒的请求超时时间 (0 表示无超时时间) |
| before | function(request) | 请求发送前的处理函数，类似于jQuery的beforeSend函数 |
| progress | function(event) | ProgressEvent回调处理函数 |
| credentials | boolean | 表示跨域请求时是否需要使用凭证 |
| emulateHTTP | boolean | 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override |
| emulateJSON | boolean | 将request body以application/x-www-form-urlencoded content type发送 |
axios请求数据
第三方插件, 使用步骤
- 安装 npm install axios –save
- 引入 import Axios from ‘axios’
- 使用:
Axios.get(api).then((response)=>{
this.items = response.data.result;
console.log(response);
}).catch((error)=>{
console.log(error);
})
父子组件传值
父组件给子组件传值
- 父组件调用子组件的时候给子组件绑定动态属性
<v-header :title="title"></v-header>
- 在子组件里通过 props接收父组件传过来的数据
props:['title']
父组件主动获取子组件数据方法, 子组件主动获取父组件数据方法
父组件主动获取子组件数据和方法:
- 调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
- 在父组件里通过 this.$refs.header.属性
getChildData(){
alert(this.$refs.header.msg)
}
子组件主动获取父组件数据和方法
this.$parent.数据
this.$parent.方法
非父子组件传值
通过创建Vue实例, 广播和监听实现传值
- 创建Vue实例
import Vue from 'Vue';
var VueEvent = new Vue();
export default VueEvent;
- 导入Vue实例并发送广播
VueEvent.$emit('to-news', this.msg);
- 生命周期函数mounted()监听广播, 拿到数据
mounted(){
VueEvent.$on('to-news',function (data) {
console.log(data);
})
}
Vue路由
vue路由配置
- 安装vue-router
npm install vue-router –save
cnpm install vue-router –save - 引入并Vue.use(VueRouter)(main.js)
import VueRouter from ‘vue-router’
Vue.use(VueRouter) - 配置路由
- 创建组件, 引入组件
- 定义路由
const routes = {
{path : ‘/foo’, component: Foo},
{path : ‘/bar’, component: Bar},
{path : ‘
}
- 实例化VueRouter
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
4.挂载
const app = new Vue({
router
}).$mount('#app')
- 在APP.vue中添加
<router-view></router-view> 放在APP.vue中
- 跳转 router-link
<router-link to="/home">首页</router-link>
<router-link to="/news">news</router-link>
动态路由配置
- 配置动态路由
{path : '/content/:aid', component: Content},
<li v-for="(item, key) in list">
<router-link :to="'/content/'+key">{{ item }}</router-link>
</li>
- 在对应页面获取动态路由的值
this.$route.params
GET传值
- 配置动态路由
<li v-for="(item, key) in list">
<router-link :to="'/product?aid='+key">{{ item }}</router-link>
</li>
- 获取对应页面动态路由的值
this.$route.query
vue编程式导航
this.$router.push({path:'news'})
路由嵌套
配置路由
{ path : '/user',
component: User,
children:[
{path: 'add-user', component: UserAdd},
{path: 'user-list', component: UserList}
]
}
设置router-link
<div class="left">
<ul>
<li>
<router-link to="/user/add-user">增加用户</router-link>
</li>
<li>
<router-link to="/user/user-list">用户列表</router-link>
</li>
</ul>
</div>
elementUI
使用方法
- 官网http://element-cn.eleme.io/#/zh-CN/component/installation
- 安装 npm i element-ui -S
- 在main.js引入elementui css 和 插件
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’; - 看官方文档直接使用
- 配置file.loader
webpack.config.js里配置
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
},
