Vue 5小时学习小教程

• Z时代
• 2024-01-10
• 分类：综合

Vue

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的生命周期 span 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对象包含以下属性

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>

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

props:[\'title\']

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

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

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

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

2. 在父组件里通过 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;

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

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

3. 生命周期函数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’}, //默认跳转路由

}

3. 实例化VueRouter

const router = new VueRouter({

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

})

4.挂载

const app = new Vue({

　　router

}).$mount(\'#app\')

5. 在APP.vue中添加

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

6. 跳转 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>

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

this.$route.params

GET传值

1. 配置动态路由

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

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

</li>

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

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\'

},

以上是 Vue 5小时学习小教程 的全部内容， 来源链接： utcz.com/z/379232.html