一、Vue
Vue是遵循MVVW架构模式实现的前端框架
npm导入路径：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js
MVVM架构 Model数据 View模板 ViewModel处理数据
1、ES6的常用语法：
变量的定义，var，let，const
- Var 变量的提升，函数作用域 全局作用域，重新定义不会报错，可以重新赋值
- let 块级作用域 { }，重新定意会报错，可以重新赋值
- const 定义不可修改的常量，不可以重新赋值
箭头函数的this取决于当前的上下文环境：类似于python的匿名函数
this指当前函数最近的调用者，距离最近的调用者
解构：
字典解构 {key,key,...} 注：要使用key才行
数组结构 [x,y,.....]
let obj = { a:1, b:2 }; let hobby = ["吹牛", "特斯拉", "三里屯"]; let {a,b} = obj; let [hobby1,hobby2,hobby3] = hobby; console.log(a); console.log(b); console.log(hobby1); console.log(hobby2); console.log(hobby3);2、Vue的核心思想是数据驱动视图
1）Vue的常用指令
v-text：获取文本内容
v-html：获取html内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body><div id="app"> <h2 v-text="name"></h2> <h3 v-text="age"></h3> <div v-html="hobby"></div></div><script>const app = new Vue({ el:"#app", data:{ name:"PDD", age:18, hobby:"<ul><li>学习</li><li>刷剧</li><li>Coding</li></ul>" }});</script></body></html>v-for：循环获取数组
v-for：循环获取字典
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body><div id="app"> <ul> <li v-for="(course,index) in course_list" :key="index">{{index}}:{{course}}</li> <li v-for="(item,index) in one" :key="index"> {{index}}:{{item.name}}:{{item.age}}:{{item.hobby}} </li> </ul></div><script>const app = new Vue({ el:"#app", data:{ course_list:["classname","teacher","student"], one:[{name:"eric",age:"18",hobby:"music"}, {name:"bob",age:"18",hobby:"dance"}] }})</script></body></html>v-bind：自定制显示样式，动态绑定属性。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .my_app{ width: 200px; height: 200px; border: 1px solid red; } </style></head><body><div id="app"> <div v-bind:> </div> <img :src="my_src" alt=""> <!-- v-bind: 可以简写为 : --></div><script>const app = new Vue({ el:"#app", data:{ is_show:true, //true表示显示style样式，false不显示style样式 my_src:"http://i0.hdslb.com/bfs/archive/590f87e08f863204820c96a7fe197653e2d8f6e1.jpg@1100w_484h_1c_100q.jpg" }})</script></body></html>v-on@事件名：事件绑定
<!DOCTYPE html><html lang="en" v-if：条件判断
v-if v-else-if v-else
<!DOCTYPE html><html lang="en" v-show：布尔值类型判断
<!DOCTYPE html><html lang="en" 综合案例
<!DOCTYPE html><html lang="en" v-model：获取数据，标签的属性设置 ，获取其属性值，用户信息等，例如input，select等
<!DOCTYPE html><html lang="en" v-model.lazy：失去光标绑定数据事件
v-model.lazy.number：数据类型的转换
v-model.lazy.trim：清除空格
<!DOCTYPE html><html lang="en" 2）自定义指令
v-自定义的函数（指令）：自定制函数（指令）
Vue.directive（）
<!DOCTYPE html><html lang="en" 3）方法集合
v-text
v-html
v-for
v-if v-else-if v-else
v-bind 绑定属性
v-on 绑定事件
v-show display
v-model 数据双向绑定
input
textarea
select
指令修饰符
.lazy
.number
.trim
自定义指令
Vue.directive（'指令名'，function(el,参数binding){ }）
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
value 指令绑定数据的值
modifiers 指令修饰符组成的对象
二、Vue获取DOM，数据监听，组件，混合和插槽
注：":" 是指令 "v-bind"的缩写，"@"是指令"v-on"的缩写；"."是修饰符。
1、Vue获取DOM
给标签加ref属性：ref="my_box"
获取：this.$refs.my_box;
<!DOCTYPE html><html lang="en" computed：计算属性，放的是需要处理的数据
<!DOCTYPE html><html lang="en" 2、数据监听
watch ：监听不到可以添加deep属性
deep:true ：深度监听，deep监听不到，可以使用 $.set() 属性操作值
$.set()
字符串监听：监听到的新旧值不同。
数组：只能监听到长度的变化，新旧值相同，改变数组值的时候要使用 $set(array,index,value)
对象：只能监听到value的改变，必须深度监听：deep，增加对象的key必须使用：$set(array,key,value)
注：数组监听有坑
<!DOCTYPE html><html lang="en" 3、组件
可复用
全局组件的定义：Vue.component("myheader",{}）
全局组件的使用：<myheader></myheader>
<!-- 全局注册组件 --><!DOCTYPE html><html lang="en" 局部组件的定义：components: {my_com: my_com_config}
局部组件的使用：<my_com></my_com>
<!-- 局部注册组件 --><!DOCTYPE html><html lang="en" 父子组件：
注：组件只识别一个作用域块
<!-- 父子组件的进本使用 --><!DOCTYPE html><html lang="en" 父子组件的通信：
父子通信（主操作在父级）：
父级定义方法：:father_say="f_say"
子级调用方法：props: ['father_say']
子级使用方法（模板语言直接调用）：{{father_say}}
<!DOCTYPE html><html lang="en" 子父通信（主操作在子级）：
子集定义方法：@click='my_click'
子级提交事件：this.$emit("事件名",data)
父级绑定子级提交的事件：@事件名="处理的方法"
父级处理方法： methods: {处理的方法: function(data){data 数据处理} }
父级使用方法（模板语言直接调用）：{{say}}
<!DOCTYPE html><html lang="en" 非父子级通信：
定义中间调度器：let event = new Vue()
需要通信的组件向中间调度器提交事件：event.$emit("事件名", data)
接收通信的组件监听中间调度器里的事件：event.$on("事件名", function(data){data操作(注意：this的问题)})
<!DOCTYPE html><html lang="en" 4、混合
实际上在框架中用的很少
作用：复用共用的代码块
minxins:[base]
<!DOCTYPE html><html lang="en" <!-- 混合示例 --><!DOCTYPE html><html lang="en" 5、插槽
作用：实现组件内容的分发
slot:
直接使用slot标签：<slot></slot>
名命slot标签：
先给slot加name属性：<slot name="title"></slot>
给标签元素添加slot属性：<h3 slot="title">Python</h3>
<!-- 未命名的slot标签 --><!DOCTYPE html><html lang="en" <!-- 命名的slot标签 --><!DOCTYPE html><html lang="en" 三、VueRouter
特点：通过路由和组件实现一个单页面的应用。
1、路由的注册：静态路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title></head><body><div id="app"> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-view></router-view></div><script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'<div><h1>首页组件</h1></div>' } }, { path:"/course", component:{ template:'<div><h1>课程组件</h1></div>' } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router })</script></body></html>2、路由的注册：动态路由（路由的参数）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title></head><body><div id="app"> <!-- 路由动态绑定：to --> <router-link :to="{name:'home'}">首页</router-link> <router-link :to="{name:'course'}">课程</router-link> <!-- 带有参数的静态路由绑定 --> <router-link to="/user/nepenthe?age=20">用户1</router-link> <!-- 带有参数的动态路由绑定 --> <router-link :to="{name:'user',params:{name:'forget-me-not'},query:{age:'23'}}">用户2</router-link> <router-view></router-view></div><script> // 定义路由匹配规则 let url = [ { path:"/", name:"home", component:{ template:'<div><h1>首页组件</h1></div>' } }, { path:"/course", name: "course", component:{ template:'<div><h1>课程组件</h1></div>' } }, { path:"/user/:name", // 参数设置（？P<name>.*） name: "user", component:{ template:'' + '<div>' + // 获取路由name：this.$route.name '<h1>{{this.$route.name}}用户组件</h1>' + // 获取路由中参数：this.$route.params.name '<h1>username:{{this.$route.params.name}}</h1>' + // 获取路由中参数（使用？的参数）：this.$route.query.age '<h1>age:{{this.$route.query.age}}</h1>' + '</div>', // Vue属性加载完成后执行的方法 mounted(){ console.log(this.$route) } } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router })</script></body></html>3、路由的注册：自定义路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title></head><body><div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/login">登录</router-link> <router-view></router-view></div><script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '<button @click="my_click">点击跳转登录页面</button>' + '</div>', methods:{ my_click: function(){ console.log(this.$route); // $route 当前路由的所有信息 console.log(this.$router); // $router VueRouter的实例化对象 console.log(this.$el); console.log(this.$data); this.$router.push("/login") // 跳转页面 --> 跳转到登录组件 } } } }, { path:"/course", component:{ template:'<div><h1>课程组件</h1></div>' } }, { path:"/login", component:{ template:'' + '<div>' + '<h1>登录组件</h1>' + '</div>' } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router })</script></body></html>4、路由的钩子函数：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title></head><body><div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/user">用户</router-link> <router-link to="/login">登录</router-link> <router-view></router-view></div><script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '<button @click="my_click">点击跳转登录页面</button>' + '</div>', methods:{ my_click: function(){ console.log(this.$route); // $route 当前路由的所有信息 console.log(this.$router); // $router VueRouter的实例化对象 console.log(this.$el); console.log(this.$data); // 跳转页面 --> 跳转到登录组件 this.$router.push("/login") } } } }, { path:"/course", component:{ template:'<div><h1>课程组件</h1></div>' } }, { path:"/login", component:{ template:'' + '<div>' + '<h1>登录组件</h1>' + '</div>' } }, { path:"/user", meta:{ required_login: true }, component:{ template:'' + '<div>' + '<h1>用户组件</h1>' + '</div>' } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url, mode:'history' // 清除路径 }); router.beforeEach(function (to, from, next) { console.log(to); // 跳转到哪里 console.log(from); // 从哪来 console.log(next); // 下一步做什么 // 直接路径判断 // if(to.path == "/user"){ // next("/login"); // } // 使用meta判断（配置方便） if(to.meta.required_login){ next("login"); } next(); }); // router.afterEarch(function(to, from){ // 智能识别路由要去哪和从哪来，一般用于获取路由从哪来 // }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router })</script></body></html>5、子路由的注册：静态路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title></head><body><div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/course/detail">课程详情</router-link> <router-view></router-view></div><script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '</div>' } }, { path:"/course", component:{ template:'' + '<div>' + '<h1>课程组件</h1>' + '</div>' } }, { path:"/course/detail", component:{ template:'' + '<div>' + '<h1>课程详情组件</h1>' + '<hr>' + '<router-link to="/course/brief">课程概述</router-link> ' + ' <router-link to="/course/chapter">课程章节</router-link>' + '<router-view></router-view>' + '</div>' }, children:[ { path:"/course/brief", component:{ template:'' + '<div>' + '<h1>课程概述组件</h1>' + '</div>' } },{ path:"/course/chapter", component:{ template:'' + '<div>' + '<h1>课程章节组件</h1>' + '</div>' } }, ] } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router })</script></body></html>6、子路由的注册：动态路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title></head><body><div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/course/detail">课程详情</router-link> <router-view></router-view></div><script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '</div>' } }, { path:"/course", component:{ template:'' + '<div>' + '<h1>课程组件</h1>' + '</div>' } }, { path:"/course/detail", redirect:{name:'brief'}, // 重定向子路由，实现默认页面显示 component:{ template:'' + '<div>' + '<h1>课程详情组件</h1>' + '<hr>' + '<router-link :to="{name:\'brief\'}">课程概述</router-link> ' + '<router-link to="/course/chapter">课程章节</router-link>' + '<router-view></router-view>' + '</div>' }, children:[ { path:"brief", name:"brief", component:{ template:'' + '<div>' + '<h1>课程概述组件</h1>' + '</div>' } },{ path:"/course/chapter", name:"chapter", component:{ template:'' + '<div>' + '<h1>课程章节组件</h1>' + '</div>' } }, ] } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router })</script></body></html>7、命名的路由视图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>Title</title></head><body><div id="app"> <!-- 路由绑定：to --> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/user">用户</router-link> <router-view name="head"></router-view> <router-view name="footer"></router-view> <router-view></router-view></div><script> // 定义路由匹配规则 let url = [ { path:"/", component:{ template:'' + '<div>' + '<h1>首页组件</h1>' + '</div>', } }, { path:"/course", component:{ template:'<div><h1>课程组件</h1></div>' } }, { path:"/user", components:{ head:{ template:'' + '<div>' + '<h1>用户head</h1>' + '</div>' }, footer:{ template:'' + '<div>' + '<h1>用户footer</h1>' + '</div>' } } } ]; // 实例化VueRouter对象 let router = new VueRouter({ routes:url, mode:'history' // 清除路径 }); router.beforeEach(function (to, from, next) { next(); }); // 把VueRouter的实例化对象注册到Vue的跟实例 const app = new Vue({ el:"#app", router:router })</script></body></html>8、Vue的路由：
注册：
-- 定义一个匹配规则对象
let url = [
{
path:"/",
component:{}
}
]
-- 实例化VueRouter对象 并把匹配规则注册进去
let router = new VueRouter({
routes:url
})
-- 把VueRouter实例化对象注册到Vue的根实例
const app = new Vue({
el:""
})
-- router-link
-- router-view
子路由的注册
-- 在父路由里注册children：[{},{}]
-- 在父路由对应的组件里的template里写 router-link router-view
路由的名命
-- name
-- 注意 to 一定动态绑定 ：to=" {name:' '} "
路由的参数
this.$route.params.xxxx
this.$route.query.xxxx
自定义路由
this.$router.push("/course")
this.$router.push({name:' ', params:{ },query:{}})
路由的钩子函数
router.beforeEach(function(to, from, next){
to 路由去哪
from 路由从哪来
next 路由接下来要做什么
}) # 一般用于拦截
router.afterEach(function(to, from){
}) # 一般用于获取
注意
$route 路由的所有信息组成的对象
$router VueRouter 实例化对象
redirect 路由的重定向
四、Vue的生命周期
Vue生命周期的钩子函数：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <title>Title</title></head><body><div id="app"> {{name}}</div><script> const app = new Vue({ el:"#app", data:{ name:"eric" }, methods:{ init:function(){ console.log(123) } }, beforeCreate(){ console.group("BeforeCreate"); console.log(this.$el); console.log(this.name); console.log(this.init); }, created(){ console.group("Created"); console.log(this.$el); console.log(this.name); console.log(this.init); }, beforeMount(){ console.group("BeforeMount"); console.log(this.$el); console.log(this.name); console.log(this.init); }, mounted(){ console.group("Mounted"); console.log(this.$el); console.log(this.name); console.log(this.init); }, beforeUpdate(){ console.group("BeforeUpdate"); console.log(this.$el); console.log(this.name); console.log(this.init); }, updated(){ console.group("Updated"); console.log(this.$el); console.log(this.name); console.log(this.init); }, beforeDestroy(){ console.group("BeforeDestroy"); console.log(this.$el); console.log(this.name); console.log(this.init); }, destroyed(){ console.group("Destroyed"); console.log(this.$el); console.log(this.name); console.log(this.init); } })</script></body></html>Vue的生命周期的钩子 LifeCycle hooks
数据监听之前：beforeCreate()；
监听数据变化：created()；
虚拟dom加载完成前：beforeMount()；
页面真实加载完成后：mounted()；
数据改变前执行的函数：beforeUpdate()；
数据改变后执行的函数：updated()；
Vue实例销毁前：beforeDestroy()；
Vue实例销毁后：destroyed()s
五、Vue-cli脚手架
作用：脚手架帮助搭建Vue项目
下载（下载到全局）：npm i vue-cli -g
用vue-cli搭建项目：vue init webpack 项目名称
启动项目：
cd到项目目录下：npm run dev
vue-cli项目目录：
build 打包后存放的所有文件包括配置文件
config 配置文件
node_models 依赖包
src 工作目录
static 静态文件
index.html 单页面
pckage.json 存放所有项目信息
路由的解耦过程：
下载 npm i vue-router
导入 import VueRouter from 'vue-router'
Vue.use(VueRouter)
定义匹配规则url
实例化对象VueRouter
把VueRouter对象注册到Vue的跟实例中
原文转载：http://www.shaoqun.com/a/498796.html
focalprice：https://www.ikjzd.com/w/1094.html
乐一番：https://www.ikjzd.com/w/1562
ask me：https://www.ikjzd.com/w/2459
一、VueVue是遵循MVVW架构模式实现的前端框架npm导入路径：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.jsMVVM架构Model数据View模板ViewModel处理数据1、ES6的常用语法：变量的定义，var，let，constVar变量的提升，函数作用域全局作用域，重新定义不会报错，可以重新赋值let块级作用域{}，重新定意会报错
ensogo：ensogo
wario：wario
怎样辨别火车票真伪？：怎样辨别火车票真伪？
Clothing stores in the United States：Clothing stores in the United States
如何使用亚马逊Buy Box提高销量？5大妙招，销量大涨！：如何使用亚马逊Buy Box提高销量？5大妙招，销量大涨！
没有评论:
发表评论