Vue 5小时学习小教程

Vue

Vue

• Vue
  • 起步
    • 指令
      • v-bind
      • v-if
      • v-for
      • v-on
      • v-model
      • v-bind和v-on缩写
    • 搭建Vue开发环境
    • vue项目结构
    • Vue开始
      • 数据绑定, 绑定属性 循环渲染数据
      • 绑定属性, 绑定class, 绑定style
      • 双向数据绑定, Vue中ref获取dom节点
      • vue事件 定义方法 执行方法 获取数据 改变数据 事件对象
      • Vue事件结合双向数据绑定实现TODOlist
      • Vue中的模块化及封装Storage组件实现本地保存
      • Vue组件 生命周期函数
      • Vue完整的生命周期
      • Vue请求数据
        • vue-resource
      • 支持的HTTP方法和options
        • axios请求数据
      • 父子组件传值
        • 父组件给子组件传值
        • 父组件主动获取子组件数据方法, 子组件主动获取父组件数据方法
        • 非父子组件传值
      • Vue路由
        • vue路由配置
        • 动态路由配置
        • vue编程式导航
        • 路由嵌套
      • elementUI
        • 使用方法

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" @click="changeMessage">改变信息</button>

搭建Vue开发环境

1. 安装node.js
2. 安装vue脚手架 npm install –global vue-cli
3. 创建项目 cd到对应项目
   vue init webpack vue-demo1
4. npm install / cnpm install 安装依赖
5. npm run dev

另一种创建项目的方式: (更精简)

1. 安装node.js
2. 安装vue脚手架 npm install –global vue-cli
3. 创建项目 cd到对应项目
   vue init webpack-simple vue-demo1
4. npm install / cnpm install 安装依赖
5. 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" @click="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组件使用:

1. 引入组件
2. 挂载组件
3. 在模板中使用

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

官方提供的插件, 使用步骤

1. vue-resource : 使用 npm install vue-resource –save 安装
2. man.js 引入

import VueResource from ‘vue-resource’
Vue.use(VueResource)

1. 使用

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请求数据

第三方插件, 使用步骤

1. 安装 npm install axios –save
2. 引入 import Axios from ‘axios’
3. 使用:

Axios.get(api).then((response)=>{

　　this.items = response.data.result;

　　console.log(response);

}).catch((error)=>{

　　console.log(error);

})

父子组件传值

父组件给子组件传值

1. 父组件调用子组件的时候给子组件绑定动态属性

<v-header :title="title"></v-header>

1. 在子组件里通过 props接收父组件传过来的数据

props:['title']

父组件主动获取子组件数据方法, 子组件主动获取父组件数据方法

父组件主动获取子组件数据和方法:

1. 调用子组件的时候定义一个ref

<v-header ref="header"></v-header>

1. 在父组件里通过 this.$refs.header.属性

getChildData(){

alert(this.$refs.header.msg)

}

子组件主动获取父组件数据和方法

this.$parent.数据

this.$parent.方法

非父子组件传值

通过创建Vue实例, 广播和监听实现传值

1. 创建Vue实例

import Vue from 'Vue';

 

var VueEvent = new Vue();

 

export default VueEvent;

1. 导入Vue实例并发送广播

VueEvent.$emit('to-news', this.msg);

1. 生命周期函数mounted()监听广播, 拿到数据

mounted(){

　　VueEvent.$on('to-news',function (data) {

　　console.log(data);

})

}

Vue路由

https://router.vuejs.org/

vue路由配置

1. 安装vue-router
   npm install vue-router –save
   cnpm install vue-router –save
2. 引入并Vue.use(VueRouter)(main.js)
   import VueRouter from ‘vue-router’
   Vue.use(VueRouter)
3. 配置路由
   1. 创建组件, 引入组件
   2. 定义路由

const routes = {

　　{path : ‘/foo’, component: Foo},

　　{path : ‘/bar’, component: Bar},

　　{path : ‘#’ ,redirect:’/home’}, //默认跳转路由

}

1. 实例化VueRouter

const router = new VueRouter({

　　routes // (缩写) 相当于 routes: routes

})

4.挂载

const app = new Vue({

　　router

}).$mount('#app')

1. 在APP.vue中添加

<router-view></router-view> 放在APP.vue中

1. 跳转 router-link

<router-link to="/home">首页</router-link>

<router-link to="/news">news</router-link>

动态路由配置

1. 配置动态路由

{path : '/content/:aid', component: Content},

 

<li v-for="(item, key) in list">

　　<router-link :to="'/content/'+key">{{ item }}</router-link>

</li>

1. 在对应页面获取动态路由的值

this.$route.params

GET传值

1. 配置动态路由

<li v-for="(item, key) in list">

　　<router-link :to="'/product?aid='+key">{{ item }}</router-link>

</li>

1. 获取对应页面动态路由的值

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

使用方法

1. 官网http://element-cn.eleme.io/#/zh-CN/component/installation
2. 安装 npm i element-ui -S
3. 在main.js引入elementui css 和 插件
   import ElementUI from ‘element-ui’;
   import ‘element-ui/lib/theme-chalk/index.css’;
4. 看官方文档直接使用
5. 配置file.loader

webpack.config.js里配置

{

　　test: /\.(eot|svg|ttf|woff|woff2)$/,

　　loader: 'file-loader'

},