脚本宝典收集整理的这篇文章主要介绍了Vue框架具体详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
title: Vue框架介绍与ES6ES7语法
categories: Vue
tags: ["库与框架区别","MVVM与MVC","指令","基本代码",方法,配置对象,过滤器,生命周期,axios请求,全局组件,"ES6","ES7"]
date: 2018-05-22 12:10:18
前端框架Vue
框架与库的区别
小而巧为库,大而全为框架
库
框架
介绍MVVM与MVC
MVC 是后端开发思想,分为三个部分
MVVM 前端页面的分层开发思想,把一个完整的页面分成了三部分
Model(页面中需要的数据),这里所指的是:data部分
基本代码详情
/**
* 容器就是 MVVM 中的 View
*
* 实例对象就是 MVVM 中的 VM, 被称为调度者
*
* data就是 MVVM 中的 Model
*/
1. 导入Vue包
<script src = "vue-2.5.15.js"></script>
2. 添加一个容器, 将来被Vue控制
<div id = "box">{{msg}}</div>
3. 创建Vue的实例对象
const vm = new Vue({
// 3.1 el传入的是选择器, 页面要控制的元素
el: "#box",
data: {
// 3.2 用data渲染数据
msg: "Hello Vue",
flag: true
},
// 可以绑定事件处理函数
methods: {
},
})
/**
* VM的实例对象, 会监听data中每一项的数据变化, 只要一变化, VM就会重新把el指定区域所有的指
* 令重新解析一遍
* data中的数据, 在每个methods方法中都共享
*
*/
Vue指令
表达式就是指令,如果想让指令生效必须放到el的容器里,他有控制HTML的能力,v-系列插入属性节点,插值表达式插入内容区域
插值表达式
<p>{{msg}}</p>
v-cloak
在外层的元素添加 v-cloak ,而且需要在style样式表中添加一个属性
<style>
[v-cloak] {
display: none;
}
v-text
<h1 v-text = "msg"></h1>
<h1 v-text = "msg + '拼接字符串'"></h1>
v-html
渲染标签
<div v-html = "msg"></div>
data: {
msg: "<h1>文本</h1>"
}
v-bind
可以单向数据绑定 model => view
<!-- 完整版 -->
<img v-bind:src = "images"/>
<!-- 简写版 -->
<img :src = "images"/>
data: {
images: "./img/01.png"
}
v-on
定义事件名时可以进行传参操作,添加()即可
<!-- 示例 -->
<button v-on:事件名称 = "btn"></button>
<!-- ()进行传参 -->
<button v-on:click = "btn(111)"></button>
<!-- 原始版 -->
<button v-on:click = "btn"></button>
<!-- 简化版 -->
<button @:click = "btn"></button>
methods: {
// 原始版
btn: function(str){
console.log(str);
},
// 简化版
btn(str){
console.log(str);
}
}
v-model
data <----> 页面
<input type = "type" v-model = "msg"/>
data: {
msg: "双向数据绑定"
}
v-for与:key
v-for(遍历的item项, 索引) in 数组 :key="item.id"
尽量使用v-for时,要添加:key,取值:number与string
<!-- 正式版 -->
<li v-for = "(item, i) in arr" :key="item.id">
<p>索引: {{i}}, 值: {{item}}</p>
</li>
<!-- 简写版 -->
<li v-for="item in arr" :key="item.id">{{item}}</li>
data: {
arr: ["张三", "李四", "王五"]
}
v-if与v-show
应用场景: 切换次数多使用 v-show,切换次数少使用 v-if
<!-- v-if 语法 -->
<button @click="flag=!=flag"></button>
<h1 v-if="flag">显示与隐藏</h1>
<!-- v-show 语法 -->
<button @click="flag"></button>
<h1 v-show="flag">显示与隐藏</h1>
data: {
flag: true
}
v-if与v-else
<button @click="flag=!flag"></button>
<h1 v-if="flag">显示</h1>
<h1 v-else>隐藏</h1>
data {
flag: true
}
绑定class样式
绑定具体类名
.a{color: red;}
.b{font-size: 18px;}
/ 固定版 /
<h1 :class="['a', 'b']"></h1>
/ 动态版 /
<h1 :class="[flag ? a : b]"></h1>
<button @click="flag=!flag">切换</button>
data: {
flag: true
}
方法
方法-Vue.$set()
应用场景: 如果想在data动态一个值,就需要此方法
{{user.name}}
data: {
user: {name: "zs"}
}
methods: {
add(){
this.$set(this.user, "age", 18)
}
}
方法-Vue.$mount()
如果el与$mount同时使用了, el优先级最高
let vm = new Vue({
data:{},
methods: {}
})
vm.$mount("#box");
配置对象
渲染模板template
此优先级比el高,会把el的覆盖并替换
<h3>{{msg}}</h3>
let vm = new Vue({
el: "#box",
template: "<h1>{{msg}}</h1>",
data: {
msg: "Vue"
}
})
过滤器
输出数据时,需要对数据进行格式上的处理,并将结果呈现到页面上,使用Vue提供的过滤器
可以连续设置过滤器
<p>{{str | dateFormat}}</p>
<!-- 调用传参 -->
<p>{{str | dateFormat()}}</p>
data: {
str: "2018-01-25T02:02.045z"
}
创建全局过滤器
需要在全局创建
Vue.filter("dateFormat", (originVal)=>{
const dt = new Date(originVal)
const y = dt.getFullYear();
return y;
})
创建私有过滤器
只能被当前所属的实例所控制的区域使用
let vm = new Vue({
el: "",
filters: {
过滤器名称: ()=>{
}
}
})
实例生命周期
每一个vm实例,在创建、运行、销毁的三个阶段,都会依次触发事件,这些事件就是生命周期函数
生命周期钩子(别名)=生命周期函数=生命周期事件
生命周期函数分类
创建期间的生命周期函数(一辈子只执行一次)
运行期间的生命周期函数
销毁期间的生命周期函数
生命周期函数介绍
beforeCreate: ()=>{} 比方科瑞特
created: ()=>{} 科瑞唉特d
beforeMount: ()=>{} 比方忙特
mounted: ()=>{} 忙提特
beforeUpdate: ()=>{}
updated: ()=>{}
beforeDestroy: ()=>{}
destroyed: ()=>{}
使用axios发起ajax请求
axios只能发起get与post请求,无法发起jsonp请求,如果涉及到jsonp可以在后端设置CORS跨域资源共享
请求方式
axios
vue-resource
语法
在引入axios包时,全局就多了一个axios成员
get请求
// 返回值是 promise 实例对象
let result = axios.get("地址?请求参数");
// 通过 then 指定回调, 就可以拿到服务器返回的数据
result.then((myresult)=>{
// 返回数据就在 myresult.data 身上
console.log(myresult);
})
Vue中使用get请求
<button @click="btn"></button>
// 需要在全局下设置
Vue.prototype.$http = axios;
methods: {
btn(){
//1. 调用axios发起get请求, 返回值是实例对象, 调用实例对象的
axios.get("地址").then((result)=>{
result.data
});
//2.
this.$http.get("地址").then((result)=>{
result.data
})
}
}
post请求
axios.post("地址", {name: "zs", age: 18}).then(()=>{
})
axios高级用法
全局配置请求API的跟路径
// 全局配置 axios 请求 API 接口时候的根路径
axios.defaults.baseURL = "http://www.liulongbin.top:3005";
Vue.prototype.$http = axios;
拦截器实现loading效果
拦截器分两部分
请求开始时候的拦截器
请求完毕以后的拦截器
动画
只能实现简单的动画,内容需要 transition 标签才能实现过渡动画,动画需要在style标签内设置
动画分为两部分
入场时候
离场时候
第三库动画库
单个元素使用
给 transition 添加入场与离场动画
多个元素使用
计算属性
如果计算属性所指向的 function 中, data上的数据发生了变化,则会重新计算属性重新求值
computed: {
funllname: function(){}
}
Vue配置webpack
安装传统的安装webpack,在导入Vue组件的时候会出现报错,因为默认导入时阉割版的Vue,开发时需要手动进行指定正常版的Vue,并导入进去
在 index.js 中使用 import 导入 vue 模块:
import Vue from 'vue'
在 index.html 中创建将来要被 vm 实例控制的 div:
<!-- 将来,这个 div 就是 Vue实例 要控制的区域 -->
<div id="#app"></div>
在 index.js 中创建 vm 实例,并使用 el 指定要控制的区域,使用 data 指定要渲染的数据:
const vm = new Vue({
el: '#app', // 要控制的区域
data: {
msg: 'ok' // 要渲染的数据
}
})
关于基于webpack的vue项目报错
如何让 import 导入最全的 vue 包呢?
组件
模块化和组件化概念
模块化:以代码角度思考, 把可复用的代码,抽离为单独的模块
组件化:以UI角度思考, 把可复用的UI结构,抽离为单独的模块
定义组件
以上是脚本宝典为你收集整理的Vue框架具体详解全部内容,希望文章能够帮你解决Vue框架具体详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。