一 vue 特色 https://cn.vuejs.org/v2/guide/
mvvm（前端） m:model（数据） v:view（视图）
vm:viewmodel 数据和视图的桥梁
m---->mv----->v
m<----mv<-----v
双向数据绑定
angular mvc（后端） m:model（数据） v:view（视图） c:controller(控制器)
v--->c--->m
m--->v
优点：
轻量级
高效率
上手快
简单易学
文档全面简洁
二. vue指令
2.1. v-model 双向数据绑定
ref(https://www.cnblogs.com/goloving/p/9404099.html)
<input type="text" ref="name" @keyup="show"/>
console.log(this.$refs.name.value);//作用2：获取DOM元素
this.msg=this.$refs.name.value;
2.2.v-for 数组，对象，数值 最后一位是索引
<li v-for="(value,index) in arr">{{value}}---{{index}}</li>
<li v-for="(value,key,index) in obj">{{value}}--{{key}}----{{index}}</li>
<h1 v-for="i in 10">{{i}}</h1>
<template v-for="a in arr">
<h1>a</h1>
<a href="">a</a>
</template>
1. **当在组件中使用** v-for 时，key 现在是必须的。
2. 当Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，
Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引
下显示已被渲染过的每个元素。
3. 为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提
供一个唯一 key 属性。
2.3.v-bind 绑定属性
<a v-bind:href="ahref">baidu</a>
简写：
<a :href="ahref">baidu</a>
:style="{width:length+'%','background-color':'#ccc'}"
:class="[aa,bb,cc]" 变量
:class="{aa:true,bb:true,cc:false}"
<img v-for="v in src" :src="'img/'+v"/>
2.3.1样式的使用
使用class样式
1. 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
2. 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
3. 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
4. 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
使用内联样式
注意：font-size这样的一定要加 （‘ ’）
- 直接在元素上通过
:style的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
-
将样式对象，定义到
data中，并直接引用到:style中加在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
加在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
- 在
:style中通过数组，引用多个data上的样式对象+ 在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
加在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
2.4.v-html 将含有标签的字符串转化成为标签
2.5.v-text 等同于{{}} {{}}闪烁一下，再出数据 ,无法用于属性，前后可以添加内容，会被覆盖
2.6.v-show 显示和隐藏（display:none;） true显示 false 隐藏 可以判断 可以赋值 <h3 v-show="a==baba">3333</h3>
2.7.v-if 隐藏：不会渲染该标签 相当于js中的if
v-else
v-else-if
<div v-if="num>=90">
优秀
</div>
<div v-else-if="num>=60">
良好
</div>
<div v-else>
不及格
</div>
2.8.v-once <p v-once>{{num}}</p> 不会跟着改变的值
2.9.v-cloak {{}}闪烁一下，再出数据 ,无法用于属性，前后可以添加内容
<h1 v-cloak>{{msg}}</h1>
<style>
[v-cloak]{
display:none;
}
</style>
2.10 v-on 事件
<h1 v-on:click="show">{{msg}}</h1>
简写：
<h1 @click="show">{{msg}}</h1>
取消右键菜单
@contextmenu.prevent="down()"
事件修饰符：
https://www.cnblogs.com/xuqp/p/9406971.html
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，阻止事件默认行为
.capture：与事件冒泡的方向相反，事件捕获 由外到内(先触发)
.self：只会触发自己(内容文本)范围内的事件，不包含子元素(标签)，该冒泡还是要冒泡
.once：只会触发一次,相当于把自己绑定的事件删除
.passive 不阻止事件默认行为
@click.self.prevent 自己 取消默认行为
@click.prevent.self 所有取消默认行为 自己
按键修饰符：
.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键
用按键修饰符
<input type="text" @keyup.down="showTwo()"/>
用 KeyCode
<input @keydown.67="show()" />
可以直接写键盘码值或用自己的名称，替换可以keyCode
<input @keydown.c="show()" />
Vue.config.keyCodes.c = 67;
组合版（单按a,b，c）
<input type="text" @keyup.a.b.c="showa"/>
鼠标修饰符：
.left：鼠标左键
.middle：鼠标中间滚轮
.right：鼠标右键
右键单击不出菜单栏，出效果
<div class="one" @mousedown.right="show"></div>
<div class="one" @contextmenu.prevent="down()"></div>
修饰键：
.ctrl .ctrl.67 67-->c
.alt
.shift
.meta
<input @keydown.ctrl.67="ctr" />
<input @keydown.ctrl="ctrs($event)" />
注意：在Mac系统键盘上，meta对应命令键 (⌘)。
在Windows系统键盘meta对应windows徽标键(⊞)。
在Sun操作系统键盘上，meta对应实心宝石键 (◆)。
在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，
比如Knight键盘，space-cadet键盘，meta被标记为“META”。
在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。
3.表单
text,password,textarea----->v-model---》value
radio,checkbox,select----->v-model checked/v-bind:value
表单修饰符：
.lazy:失去焦点（change事件同步）或者回车的时候才会同步数据
.number:变成数值
.trim:去掉前后空格，不会去掉中间空https://www.cnblogs.com/xiaobaiv/p/9153020.html
4.网址
ajax http://www.runoob.com/vue2/vuejs-ajax.html
axios https://blog.csdn.net/sinat_38328891/article/details/80312965
https://segmentfault.com/a/1190000010902115
https://www.kancloud.cn/yunye/axios/234845（中文网）
4.1. vue-resource发送请求步骤
4.2.
params：跟在url后面传参
this.$http.get(url,{params:{user:”li”}}).then(res=>{},rej=>{})
emulateJSON:设置请求体的类型为application/x-www-form-urlencoded
this.$http.post(url,{user:”li”},{emulateJSON:true}).then(res=>{},rej=>{})
jsonp:"callback" 设置callback的名称 this.$http.jsonp(url,{params:{},jsonp:"callback"}).then(res=>{},rej=>{})
//可以代替get和post
this.$http({
url:,
data:,
method:get/post,
jsonp:"callback"
}).then(res=>{},rej=>{})
全局配置 htpp://…/api/1.html
Vue.http.options.root=”http://...” --->使用 api/1.html
Vue.http.options.emulateJSON=true;
4.3.
https://www.kancloud.cn/yunye/axios/234845
https://www.cnblogs.com/jiangxifanzhouyudu/p/9102908.html
https://blog.csdn.net/xjtarzan/article/details/80040646
4.3.1.<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
4.3.2. axios
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// 发送 GET 请求（默认的方法）
axios('/user/12345');
axios.get(url[,options]).then(res=>{},rej=>{})
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
}).catch(function (error) {
});
// 可选地，上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
}).then(function (response) {
}).catch(function (error) {
});
axios.post(url,data,[options]).then(res=>{},rej=>{})
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
})
.catch(function (error) {
});
4.3.3.
Axios.defaults.baseURL = 'https://api.example.com';//配置你的接口请求地址
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//配置token,看情况使用
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头信息。
// 超时时间
Axios.defaults.timeout = 5000;
2 将axios添加到Vue的原型对象中
Vue.prototype.$axios = axios;
3.使用this.$axios.post(url,{"name":this.name}).then()
4.3.4.在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
如果你想在稍后移除拦截器，可以这样：
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
Axios跨域 https://www.cnblogs.com/wancheng7/p/8987694.html
https://blog.csdn.net/jikangjian/article/details/80798677
如何使用proxyTable
还是拿之前使用过的vue-cli举例。我们首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用，自然而然是要配置在dev里面：
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://www.abc.com', //目标接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/api' //重写接口
}
},
cssSourceMap: false
}
5.生命周期函数（钩子函数）
https://segmentfault.com/a/1190000008010666
https://segmentfault.com/a/1190000011381906
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA（图）
八个钩子函数
beforeCreate:组件实例刚被创建，无属性
created:组件实例创建完成，有属性，没有DOM（el没有被挂载）,data已经完成，el生成了，还没有挂载。
beforeMount:模板编译之前，有DOM，并没有把DOM挂载
mounted:模板编译之后，数据都加载到页面上
beforeUpdate:组件更新之前，数据已经更新了，但是没有挂载
updated:组件更新之后，数据已经更新了，并且挂载
activated: keep-alive,组件被激活时
deactivated: keep-alive,组件被激活完成
beforeDestroy:销毁之前，实例仍然完全可用
destroyed:销毁完成，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
执行了destroy操作，原来样式保留，后续就不再受vue控制了。
6.computed和watch，methods
https://segmentfault.com/a/1190000012948175
https://www.cnblogs.com/fengxiongZz/p/8074731.html
https://blog.csdn.net/lhban108/article/details/82465547
watch、computed和methods之间的对比
-
computed(多个值变化，影响到一个结果) 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。他是函数主要当作属性来使用，逻辑简单。 -
methods方法表示一个具体的操作，主要书写业务逻辑； -
watch(一个值变化，影响到多个结果改变)一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化（watch监控路由对象‘$route’），从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；
计算属性 computed (多个值变化，影响到一个结果) 原来没有属性（结果），创建可计算属性（get/set,一个默认get体）
computed:{//前面的数值变化影响到结果---》get
// 'fullname':function(){
// return this.firstname+this.lastname;
// }
fullname(){
return this.firstname+this.lastname;
}
}
fullname:{ //双向数值修改(前面变化影响到后面，后面变化影响到前面) get+set
get:function(){
return this.firstname+"-"+this.lastname;
},
set:function(newval){
//console.log(newval);
var arr=newval.split('-');
//console.log(arr);
this.firstname=arr[0];
this.lastname=arr[1];
}
}
侦听属性 watch（变化的值） (一个值变化，影响到多个结果改变) 检测以有属性
computed是属性调用，而methods是函数调用
computed带有缓存功能，而methods不是
computed可以监控对象，而methods不是
watch可以监控对象，而methods不是
vm.$watch( expOrFn, callback, [options] )
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()
vm.$watch('someObject', callback, {
deep: true//深度监听，但是结果一样
})
vm.$watch('a', callback, {
immediate: true // true: 初始化时就会先执行一遍该监听对应的操作
})
Watch:{
'obj':{
handler(newval){
console.log(newval);
},
deep:true,
immediate: true
}
}
// 立即以 `a` 的当前值触发回调
//初始化之前，先监听一下操作，以原始的值回调
watch和computed均可以监控程序员想要监控的对象，
当这些对象发生改变之后，可以触发回调函数做一些逻辑处理
watch监控自身属性变化(重新编译，性能差) vm.$watch()
watch监控路由对象(一个值变化，影响到多个结果改变)
数据变化时来执行异步操作，这时watch是非常有用的。
计算属性computed的特点(多个值变化，影响到一个结果)
计算属性会依赖于他使用的data中的属性，
只要是依赖的属性值有改变，
则自动重新调用一下计算属性；
如果他所依赖的这些属性值没有发生改变，
那么计算属性的值是从缓存中来的，
而不是重新编译，那么性能要高一些，
所以vue中尽可能使用computed替代watch。
<div id="app">
姓：<input type="text" v-model="firstname"/>
名：<input type="text" v-model="lastname"/>
总称：{{fullname}}
<input type="text" v-model="obj.a"/>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstname:"li",
lastname:"bao",
fullname:"li bao",
obj:{a:"1111"}
},
watch:{
// obj(){//无法监测到里面数值的变化
// console.log(this.obj.a);
// },
// 'obj':{
// handler(oldVal,newVal){
// console.log(oldVal,newVal);//结果一样，都是新值
// },
// immediate: true,//初始化时就会先执行一遍该监听对应的操作
// deep:true//console.log打印的结果,
// //发现oldVal和newVal值是一样的,
// //所以深度监听虽然可以监听到对象的变化,
// //但是无法监听到具体对象里面那个属性的变化
// },
"obj.a":{
handler(oldVal,newVal){
console.log(oldVal,newVal);//结果会不一样
},
immediate: true
},
firstname(){//普通的就可以用这种方式检测,无法添加检测属性
console.log(this.firstname);
}
}
})
</script>
vm.$watch("obj.a",function(oldVal,newVal){
console.log(oldVal,newVal);
})
7.vue实例的简单属性和方法
https://www.cnblogs.com/wspblog/p/9876723.html
属性
1.this.$data/vm.$data====>data
vm.a=100;
vm.$data.a=100; 直接使用数据 实例的数据对象
2. this.$el/==vm.$el==>el 指定要绑定的元素
4. vm.$options.aa/this.$options.aa 访问自定义属性
6. 获取所有ref属性的标签（获取DOM元素）
<h1 ref="hOne">11111</h1>
console.log(this.$refs.hOne.innerHTML);
方法
1. vm.$mount("#box")=====>手动挂载 el 可以替换原来的挂载
2. this.$set(要修改的数据,属性名，属性值)/Vue.set(vm.jsona,'sex', '男')/vm.$set(要修改的数据,属性名，属性值)====>任何时候添加对象属性
3.vm.$destroy()/this.$destroy();====>销毁 destoryed/beforeDestroy
4.vm.$delete(vm.jsona,属性名)/
Vue.delete(vm.jsona,"a")/
this.$delete(this.jsona,"a")====>删除对象属性
5. vm.$forceUpdate()/this.$forceUpdate(); 更新==》
（与updated/beforeUpdate相对较多）
this.$forceUpdate();有时候你会碰到数据已经更新了但是组件还是没有刷新
6.vm.$watch(data,callback[,options])
7. vm.$nextTick(fn)/this.$nextTick()===>(原生DOM)
this.$nextTick(()=>{
console.log(this.$el.getElementsByTagName("span")[0].innerHTML)
})
Vue.nextTick().then(function(){
console.log(vm.$el.getElementsByTagName("span")[0].innerHTML)
})
1.在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
与之对应的就是beforeMount（）、mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中
其他属性和方法（组件）
$parent
$children
$emit
$on
$root
$refs
8.自定义过滤器/自定义指令/自定义键盘信息/解除事件绑定
1.0版 vue过滤器
https://www.cnblogs.com/crazycode2/p/6736189.html
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
currency 输出金钱以及小数点
pluralize 输出复数的形式
debounce 延期执行函数
limitBy 在 v-for 中使用，限制数量
filterBy 在 v-for 中使用，选择数据
orderBy 在 v-for 中使用，排序
2.0版本后，1.0过滤器都废弃，都需自定义
自定义过滤器
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
{{msg|toDo("12","5")}}
{{msg|toDoa|toDob}}
全局过滤器：Vue.filter('capitalize',function (val){
let firstcap=val.slice(0,1).toUpperCase();
let lastcap=val.slice(1);
return firstcap+lastcap;
})
本地过滤器： filters:{
capitalize(val){//局部过滤器
let firstcap=val.slice(0,1).toUpperCase();
let lastcap=val.slice(1);
return firstcap+lastcap;
}
}
<div id="app">
{{msg | capitalize('aaa','123')}}
{{msg | capitalize}}
</div>
<div id="app2">
{{msg | capitalize}}
</div>
<script>
// 2.0全局过滤器---->可以作用在任何vue实例上
Vue.filter('capitalize',function (val,str="",num=""){
let firstcap=val.slice(0,1).toUpperCase();
let lastcap=val.slice(1);
return firstcap+lastcap+str+num;
})
var vm=new Vue({
el:"#app",
data:{
msg:"apple"
},
methods:{
}
// ,
// filters:{//局部过滤器--->只能作用在自己的vue实例上
// capitalize(val,str="",num=""){
// let firstcap=val.slice(0,1).toUpperCase();
// let lastcap=val.slice(1);
//
// return firstcap+lastcap+str+num;
// }
// }
})
var vm2=new Vue({
el:"#app2",
data:{
msg:"orange"
},
methods:{
}
})
</script>
注意：过滤器不能用于v-model 等
自定义指令
http://www.cnblogs.com/ilovexiaoming/p/6840383.html
https://www.jianshu.com/p/c2bef47439ab
https://www.imooc.com/article/42891
https://blog.csdn.net/Myinlg/article/details/81092974
8.1、自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项注册局部自定义指令。
Vue.directive(“focus”,{
bind:function(){
},
inserted:function(){
},...
})
简写指令：
在 bind 和 update 钩子上做重复动作，并且不想关心其它的钩子函数
Vue.directive("focus",function(){
})
8.2、钩子函数：
指令定义函数提供了几个钩子函数（可选）：
bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入DOM(父节点)时调用（父节点存在即可调用，不必存在于 document 中）。
update：第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值，之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
unbind：只调用一次， 指令与元素解绑时调用。
8.3、钩子函数的参数：(el, binding, vnode, oldVnode)
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性
name：指令名，不包含v-的前缀；
value：指令的绑定值；例如：v-my-directive="1+1"，value的值是2；
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；
expression：绑定值的字符串形式；例如：v-my-directive="1+1"，expression的值是'1+1'；
arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 'foo'；
modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{'a':true,'b':true}
vnode：Vue编译的生成虚拟节点；
oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
<span v-bgcolor="1+1">11111</span>
<h1 v-bgcolor="‘blue’">
111
<i>333</i>
全局 简写：（bind update）
Vue.directive("bgcolor",function(el,binding,vnode){
//console.log(el);//设置的目标元素
//console.log(binding);//设置值的相关信息
// console.log(binding.value);//2,结果
// console.log(binding.expression);//1+1 过程
//console.log(vnode);//所有信息，包含子元素
el.style.background=binding.value;
})
局部
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
自定义键盘信息 只有全局
<input type="text" @keydown.ct="show()"/>
Vue.config.keyCodes.ct=17;//ctrl
vue.js怎样移除绑定的点击事件
第一种方法一定要加（）
第二种方法
<button v-if="!unbind" v-on:click="addClick">点击</button>
<button v-else >点击</button>
然后在data里添加unbind=false属性，需要解绑的时候将其设置为true
9.组件（创建的时候可以用驼峰，使用的时候用- myCom ）
组件除了没有el 和 data 变成函数之外,其他的跟new vue一样，还多了一个template,template就相当于new vue的视图
9.1 全局组件
Vue.component("myCom",{
data(){
return{
msghead:"首页"
}
},
methods:{
},
template:`<h1>{{this.msghead}}</h1>`
})
创建模板 ：template(如果tempalte内容复杂，可以创建模板）
<template id="footer">
<div> 多个内容要加div
<ul>
<li v-for="v in arr"><a href="">{{v}}</a></li>
</ul>
<p>这是尾部组件</p>
</div>
</template>
<script type="x-template" id="con">
<div> 多个内容要加div
<h1>中心内容</h1>
</div>
</script>
Vue.component("afoot",{ //全局
template:"#footer"
})
9.2 局部组件(也可以创建模板,这里没有演示，更全局方法一样）局部组件创建 方法1 Vue.extend({})
1.var cona=Vue.extend({//来创建组建
data(){
return{
}
},
methods:{
},
template:`<h1>xjnsxjnsdxsdx</h1>`
})
new Vue({
el:"#box1",
components:{//挂载
con:cona
}
})
局部组件简写应用：<mycom></mycom>
2.局部组件创建 方法2 直接写在compontents里面
new Vue({
el:"#box2",
components:{
"conb":{
data(){
return{
msg:"hello"
}
},
methods:{
},
template:`<h1>{{this.msg}}</h1>`
},
"conc":{}
}
})
3.局部组件创建 方法3 使用{}
var conc={
data(){
return{
}
},
methods:{
},
template:`<h1>xjnsxjnsdxsdx</h1>`
}
new Vue({
el:"#box1",
components:{
con:conc
}
})
局部组件简写应用：<mycom></mycom>
9.2.1名称的使用
组件挂载名称========>页面使用
myCom <my-com></my-com>
mycom <mycom></mycom>
9.3组件传参
1. 父组件向子组件传递参数（还可以传递函数） ====》props
父组件通过自定义属性的方式传给子组件(:parentmsg=”msg”)，子组件用props接受(props:[“parentmsg”])
<ahead :foo="mag"></ahead>
new Vue({ //父组件
el:"#box1",
data:{
mag:"首页"
}
})
Vue.component("ahead",{ //子组件
props:["foo"],//{}
template:`<div>
<span><</span>
<i>{{foo}}</i>
<u>+</u>
</div>`
})
https://segmentfault.com/q/1010000017479096
如果你想看到错误，你要用vue的非压缩版
Vue.component("example", {
props: {
// 基础类型检测, null意味着任何类型都行
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是String
propC: {
type: String,
required: true
},
// 数字有默认值
propD: {
type: Number,
default: 101
},
// 数组、默认值是一个工厂函数返回对象
propE: {
type: Object,
default: function() {
console.log("propE default invoked.");
return { message: "I am from propE." };
}
},
// 自定义验证函数
propF: {
isValid（validator）: function(value) {、
return value > 100;
}
}
}
});
2.子组件向父组件传递参数（还可以传递函数）===》$emit/自定义事件方式
事件绑定机制：父组件通过自定义事件的方式向子组件传递方法（@mymsg=“show”），子组件用this. e m i t ( ) 接 受 ( t h i s . emit()接受(this. emit()接受(this.emit(fun,参数1，参数2))，参数可以是子组件的，顺便传给父组件，实现子组件向父组件传值
<aaa @mymsg="get"></aaa>
//子组件
var a={
data(){
return {
msg:"子组件数据"
}
},
methods:{
send(){
this.$emit('mymsg', this.msg,this.msg2);
}
},
template:`<div>
<h1>子组件</h1>
<input type="button" @click="send()" value="send"/>
</div>`
}
}
//父组件
new Vue({
el:"#box",
data:{
msg:"hello",
msg2:"world"
},
methods:{
show(m){
alert(m);
this.msg2=m;
}
},
components:{
aaa:a
}
})
3.组件之间相互传参 原生事件法
var Event=new Vue();
Event.$emit(自定义事件名，参数1，参数2...) 发送参数
Event.$on(自定义事件名,()=>{}) 接收参数
全局：
var Event=new Vue();
组件1：
methods:{
send(){
Event.$emit("mymsgone",this.msgone);
}
},
组件2：methods:{
send(){
Event.$emit("mymsgtwo",this.msgtwo);
}
},
组件3：
mounted(){//created(){
Event.$on("mymsgone",(one)=>{
console.log(this);
this.getone=one;
})
//console.log(this);
Event.$on("mymsgtwo",function(two){
console.log(this);
this.gettwo=two;
}.bind(this));
},
-
$parent 获取父元素的数据/方法 $root 获取根组件的数据/方法 $children 获取子元素的数据/方法(mounted钩子函数，要有下标） $refs 获取子组件的方法和数据/作用2：获取DOM元素 （一定要使用 ref属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ahead ref="one" @click.native="show"></ahead>
<hr />
<h1>内容</h1>
<button @click="getchild">获取子元素</button>
</div>
<template id="head">
<div>
<h1>{{msgh}}</h1>
{{numh}}
<button @click="getfar">获取父元素</button>
</div>
</template>
<script>
var ahead={
data(){
return{
msgh:"hahaha,我是头",
numh:""
}
},
methods:{
getfar(){
//console.log(this.$parent.num);
this.numh=this.$parent.num;
this.$parent.show();
console.log(this.$root);
console.log(this.$parent);
}
},
template:"#head"
}
var vm=new Vue({
el:"#app",
data:{
num:100,
arr:[1,2,3,4,5,6],
str:"hello"
},
methods:{
show(){
alert("我是父组件");
},
getchild(){
//console.log(this.$children[0].msgh);
console.log(this.$refs.one);
}
},
components:{
ahead
}
})
</script>
</body>
</html>
- native 子组件上添加事件（父组件），触发事件，没有.native无法触发无法在组件直接使用事件，需要加修饰符来实现 根元素上监听原生事件
（把vue组件转化成一个普通的HTML标签，并且对普通的HTML标签是没有任何作用的）
6.为什么组件里的data是函数？
在组件中，因为可能在多处调用同一组件，为了不让多处的组件共享同一data对象，只能返回函数。
data为对象的话会报错，为了理解这种机制，我们假设data为一个对象，那么这同一个对象有可能被很多实例共享，一个实例改变其它也会跟着变，这明显是不对的。而通过data函数，每新建一个实例，都会调用data来return一组新的原始数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<zfoot></zfoot>
<hr />
<zfoot></zfoot>
<hr />
<zfoot></zfoot>
<hr />
<zfoot></zfoot>
</div>
<template id="foot">
<div>
{{num}}
<button @click="num++">add</button>
</div>
</template>
<script>
var obj={num:10};
// data:{
// num:10
// }
var zfoot={
data(){
return obj;
// return {
// num:10
// }
},
methods:{
},
template:"#foot"
};
var vm=new Vue({
el:"#app",
data:{
},
components:{
zfoot
}
})
</script>
</body>
</html>
-
插槽v-sort （3种）https://segmentfault.com/a/1190000012996217?utm_source=tag-newest
slot以前2.6.0以后v-slot,vue3以前的slot被废弃
1.普通插槽 <aaa> <h1>1111111</h1> </aaa> <template id="one"> <div> <h3>{{m}}</h3> <slot></slot> <h5>{{myOne}}</h5> </div> </template> 2.有名插槽(有name属性) <aaa> <h1>1111111</h1> <p slot="aa">pppp</p> </aaa> <template id="one"> <div> <slot name="aa"></slot> <h3>{{m}}</h3> <slot></slot> <h5>{{myOne}}</h5> </div> </template> 新： <aaa> <template v-slot:aa> <p>pppp</p> </template> </aaa> <template id="one"> <div> <slot name="aa"></slot> <h3>{{m}}</h3> <h5>{{myOne}}</h5> </div> </template> 3.作用域插槽 1.自定义属性(带数据的插槽) 2.使用template 3.slot-scope/v-slot
<div id="box">
<aaa>
<template slot-scope="user">
<ul>
<li v-for="item in user.da">{{item}}</li>
</ul>
</template>
新版：
<template v-slot:default="user">
<ul>
<li v-for="item in user.da">{{item}}</li>
</ul>
</template>
</aaa>
</div>
<template id="one">
<div>
<h1>{{m}}</h1>
<slot :da="test"></slot>
</div>
</template>
<script>
new Vue({
el:"#box",
data:{
},
components:{
"aaa":{
template:"#one",
data(){
return {
test:[1,2,3,4]
}
}
}
}
})
</script>
10.组件的切换效果
<div id="box">
<input type="button" @click="a='aaa'" value="aaa"/>
<input type="button" @click="a='bbb'" value="bbb"/>
<component :is="a"></component>
</div>
new Vue({
el:'#box',
data:{
a:"aaa"
},
components:{
"aaa":{
template:"<h1>aaa</h1>"
},
"bbb":{
template:"<h1>bbb</h1>"
}
}
});
10.动画
https://cn.vuejs.org/v2/guide/transitions.html
https://cloud.tencent.com/developer/article/1468992
https://segmentfault.com/q/1010000007738500
10.1使用过渡类名
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
- HTML结构：
使用name="fade"属性，来设置多个动画的名称
<div id="app">
<input type="button" value="动起来" @click="myAnimate">
<!-- 使用 transition 将需要过渡的元素包裹起来 -->
<transition name="fade">
<div v-show="isshow">动画哦</div>
</transition>
</div>
- VM 实例：
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: ‘#app’,
data: {
isshow: false
},
methods: {
myAnimate() {
this.isshow = !this.isshow;
}
}
});
2.定义两组类样式：
/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
10.2 使用第三方 CSS 动画库
duration：过渡持续时间 (以毫秒计)
https://www.cnblogs.com/cntian/p/13292041.html
注意：vue 和 animate.css 版本兼容性问题导致动画不起作用
Vue 官网引用的是 animate.css 3.5 版本
不能引用 animate.css 最新版本 例如：(4.0)
yarn add animate.css（添加）/ yarn remove animate.css(删除）
https://blog.csdn.net/yunchong_zhao/article/details/107207600
Vue-cli
-
安装 npm i animate.css@3.7.2 yarn add animate.css@3.7.2
-
导入
//引入animate.css
import animated from ‘animate.css’
//使用animated
Vue.use(animated)3.重新启动项目 npm run serve / yarn serve
4.按官网规则使用
https://www.worldlink.com.cn/osdir/animatecss.html
https://www.cnblogs.com/fang-1207/p/animationfang.html
- 导入动画类库：
注意：同时使用过渡和动画
但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
https://www.haoht123.com/2330.html
10.3使用动画钩子函数（半场动画）
https://blog.csdn.net/weixin_30423977/article/details/95577829
v-on:before-enter=“beforeEnter”入场动画之前执行beforeEnter方法
v-on:enter=“enter”入场过程中执行的方法
v-on:after-enter=“afterEnter”入场后执行的方法
v-on:enter-cancelled=“enterCancelled”入场动画取消的时候执行方法（进入取消）进入过渡被打断时
v-on:before-leave=“beforeLeave”离场动画之前执行beforeLeave方法
v-on:leave=“leave”离场动画过程中执行的方法
v-on:after-leave=“afterLeave”离场结束后执行的方法
v-on:leave-cancelled=“leaveCancelled”离场动画取消时执行的方法离开过渡被打断时
- 定义 transition 组件以及三个钩子函数：
10.4 可以通过 appear 特性设置节点在初始渲染的过渡（页面入场效果）
- {{item}}
- 10.5 过渡模式 in-out：新元素先进行过渡，完成之后当前元素过渡离开。 out-in：当前元素先进行过渡，完成之后新元素过渡进入。
<button @click=“md=‘aa’”>a
<button @click=“md=‘bb’”>b
<button @click=“md=‘cc’”>c<transition name="bbb" mode="out-in"> <component :is="md"></component> </transition>10.6 v-for 的列表过渡
- 定义过渡样式：
- 定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：
3. 定义 VM中的结构： // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { txt: '', list: [1, 2, 3, 4] }, methods: { add() { this.list.push(this.txt); this.txt = ''; } } });10.7 列表的排序过渡
默认转化为span，通过tag属性转化成为其他标签
<transition-group>组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的v-move特性，它会在元素的改变定位的过程中应用。
v-move和v-leave-active结合使用，能够让列表的过渡更加平缓柔和：
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}11.路由 https://router.vuejs.org/zh/
什么是路由（https://blog.csdn.net/aaaaa1994/article/details/88294681）
-
对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
-
对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现.
-
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
11.1在 vue 中使用 vue-router
- 导入 vue-router 组件类库：
- 使用 router-link 组件来导航
登录
注册- 使用 router-view 组件来显示匹配到的组件
-
创建使用
Vue.extend创建组件
// 4.1 使用 Vue.extend 来创建登录组件
var login = Vue.extend({
template: ‘登录组件
’
});// 4.2 使用 Vue.extend 来创建注册组件
var register = Vue.extend({
template: ‘注册组件
’
}); -
创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [
{ path: ‘/login’, component: login },
{ path: ‘/register’, component: register }
]
}); -
使用 router 属性来使用路由规则
// 6. 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: ‘#app’,
router: router // 使用 router 属性来使用路由规则
简写：router
});11.2 设置路由高亮和重定向
- .router-link-active{
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
2…myactive {
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
var routerObj = new VueRouter({
routes: [
// { path: ‘/’, component: login },
{ path: ‘/’, redirect: ‘/login’ }, //路由重定向/的页面
{ path: ‘*’, redirect: ‘/login’ }, //路由重定向所有页面
{ path: ‘/login’, component: login },
{ path: ‘/register’, component: register }
],
linkActiveClass: ‘myactive’//统一设置一个class,二级路由也可以用
})- const router = new Router({
routes: [
{
path: “/”,
name: “首页”,
redirect: ‘/home’
},
{
path: ‘/login’,
name: ‘Login’,
component: Login
},
{ path: ‘*’, component: NotFoundComponent }
],
linkActiveClass: “active-router”,
//模糊匹配 /user /user/1 /user/aa=1
linkExactActiveClass: “exact-router”//精准匹配 /user
})
https://blog.csdn.net/meikaied/article/details/85322278
11.3使用别名(alias)和给router-link修改原来的默认标签
Alias
{path:"/login",component:Login,alias:’/lo’}router-link原来的默认标签是,通过 tag=”span” 修改
登陆页面11.4 设置路由切换动效
.v-enter, .v-leave-to { opacity: 0; transform: translateX(140px); } .v-enter-active, .v-leave-active { transition: all 0.5s ease; }
11.5 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
const router = new VueRouter({
mode: ‘history’,
routes: […]
})11.6 在路由规则中定义参数（动态路由）
Query:
登录
1.在规则中定义参数：
{ path: ‘/login’, component: login }-
通过
this.$route.query来获取路由中的参数：
var register = Vue.extend({
template:<h1>登录 --- {{ this.$route.query.id }} --- {{ $route.query.name }}</h1>//this可以加可以不加});
//methods里必须加this
Params:
登录- 在规则中定义参数：
{ path: ‘/register/:id’, component: register } - 通过
this.$route.params来获取路由中的参数：
var register = Vue.extend({
data(){
return{
aid:""
}
},
created(){
this.show();
},
methods:{
show(){
//console.log(this. r o u t e . p a r a m s . i d ) ; t h i s . a i d = t h i s . route.params.id); this.aid=this. route.params.id);this.aid=this.route.params.id;//必须加this
}
},
template:<h1>注册组件 --- {{$route.params.id/this.$route.params.id}}</h1>
//this可以加可以不加
});
11.7 r o u t e 和 route和 route和router路由跳转https://www.jianshu.com/p/fa0b5d919615
https://www.cnblogs.com/hwldyz/p/9204346.html
1 $route
1.1 r o u t e 表 示 ( 当 前 路 由 信 息 对 象 ) 表 示 当 前 激 活 的 路 由 的 状 态 信 息 ， 包 含 了 当 前 U R L 解 析 得 到 的 信 息 ， 还 有 U R L 匹 配 到 的 r o u t e r e c o r d s （ 路 由 记 录 ） 。 路 由 信 息 对 象 ： 即 route 表示(当前路由信息对象) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。 路由信息对象：即 route表示(当前路由信息对象)表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的routerecords（路由记录）。路由信息对象：即route会被注入每个组件中，可以利用它进行一些信息的获取。
1. r o u t e . p a t h ∗ ∗ 字 符 串 ， 对 应 当 前 路 由 的 路 径 ， 总 是 解 析 为 绝 对 路 径 ， 如 " / f o o / b a r " 。 ∗ ∗ 2. route.path** 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。 **2. route.path∗∗字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。∗∗2.route.params
一个 key/value 对象，包含了 动态片段 和 全匹配片段，
如果没有路由参数，就是一个空对象。
3.$route.query
一个 key/value 对象，表示 URL 查询参数。
例如，对于路径 /foo?user=1，则有 r o u t e . q u e r y . u s e r = = 1 ， 如 果 没 有 查 询 参 数 ， 则 是 个 空 对 象 。 ∗ ∗ 4. route.query.user == 1， 如果没有查询参数，则是个空对象。 **4. route.query.user==1，如果没有查询参数，则是个空对象。∗∗4.route.hash**
当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
5. r o u t e . f u l l P a t h ∗ ∗ 完 成 解 析 后 的 U R L ， 包 含 查 询 参 数 和 h a s h 的 完 整 路 径 。 ∗ ∗ 6. route.fullPath** 完成解析后的 URL，包含查询参数和 hash 的完整路径。 **6. route.fullPath∗∗完成解析后的URL，包含查询参数和hash的完整路径。∗∗6.route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
**7. r o u t e . n a m e 当 前 路 径 名 字 ∗ ∗ ∗ ∗ 8. route.name 当前路径名字** **8. route.name当前路径名字∗∗∗∗8.route.meta 路由元信息1.2. route object 出现在多个地方:
(1)在组件内，即 this.$route
(2)在 $route 观察者回调内 router.match(location) 的返回值
(3)导航守卫的参数：
router.beforeEach((to, from, next) => {
// to 和 from 都是 路由信息对象
})
watch: {
$route(to, from) {
// to 和 from 都是 路由信息对象
}
}- $router对象
全局的路由实例，是router构造方法的实例。
在 Vue 实例内部，你可以通过 r o u t e r 访 问 路 由 实 例 2.1 全 局 挂 载 路 由 实 例 / / 全 局 注 册 的 路 由 V u e . u s e ( V u e R o u t e r ) 2.2 路 由 实 例 方 法 p u s h h t t p s : / / b l o g . c s d n . n e t / w e i x i n 3 8199437 / a r t i c l e / d e t a i l s / 83030010 / / 字 符 串 t h i s . router 访问路由实例 2.1 全局挂载路由实例 // 全局注册的路由 Vue.use(VueRouter) 2.2 路由实例方法push https://blog.csdn.net/weixin_38199437/article/details/83030010 // 字符串 this. router访问路由实例2.1全局挂载路由实例//全局注册的路由Vue.use(VueRouter)2.2路由实例方法pushhttps://blog.csdn.net/weixin38199437/article/details/83030010//字符串this.router.push(‘home’)// 对象
this. r o u t e r . p u s h ( p a t h : ′ h o m e ′ ) / / 命 名 的 路 由 t h i s . router.push({ path: 'home' })// 命名的路由 this. router.push(path:′home′)//命名的路由this.router.push({ name: ‘user’, params: { userId: 123 }})// 带查询参数，变成 /register?plan=123
this. r o u t e r . p u s h ( p a t h : ′ r e g i s t e r ′ , q u e r y : p l a n : ′ 12 3 ′ ) p u s h 方 法 其 实 和 < r o u t e r − l i n k t o = " . . . " > 是 等 同 的 。 注 意 ： p u s h 方 法 的 跳 转 会 向 h i s t o r y 栈 添 加 一 个 新 的 记 录 ， 当 我 们 点 击 浏 览 器 的 返 回 按 钮 时 可 以 看 到 之 前 的 页 面 。 2.2 路 由 实 例 方 法 g o / / 页 面 路 由 跳 转 前 进 或 者 后 退 t h i s . router.push({ path: 'register', query: { plan: '123' }}) push方法其实和<router-link to="...">是等同的。 注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。 2.2 路由实例方法go // 页面路由跳转 前进或者后退this. router.push(path:′register′,query:plan:′123′)push方法其实和<router−linkto="...">是等同的。注意：push方法的跳转会向history栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。2.2路由实例方法go//页面路由跳转前进或者后退this.router.go(-1) // 后退
this. r o u t e r . g o ( 0 ) / / 刷 新 t h i s . router.go(0)//刷新 this. router.go(0)//刷新this.router.go(1)//前进
this.$router.go(3)//前进3步
2.3 路由实例方法replace
//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，不会向 history 栈添加一个新的记录
05
// 一般使用replace来做404页面
this.$router.replace(’/’)11.8 使用
children属性实现路由嵌套（二级路由）
https://www.cnblogs.com/lwming/p/11282674.htmlAccount11.9命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。const router = new VueRouter({
routes: [
{
path: ‘/user/:userId’,
name: ‘user’,
component: User
}
]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：User
这跟代码调用 router.push() 是一回事：router.push({ name: ‘user’, params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径。11.10响应路由参数的变化
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
const User = {
template: ‘…’,
watch: {
‘$route’ (to, from) {
// 对路由变化作出响应…
}
}
}
或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：const User = {
template: ‘…’,
beforeRouteUpdate (to, from, next) {
// react to route changes…
// don’t forget to call next()
}
}11.11 命名视图实现经典布局（组件复用）
- 标签代码结构：
- JS代码：
- CSS 样式：
11.12路由进阶https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
路由懒加载
https://www.cnblogs.com/yzq-fighting/p/7731545.html https://blog.csdn.net/mzrxLXR/article/details/81484676使用Bootstrap
https://www.cnblogs.com/shengnan-2017/p/8094134.html12.vue-cli 2.0
https://cli.vuejs.org/guide/installation.html----》3.0
https://www.cnblogs.com/blcorder/p/12015715.html—》4.01.只在本电脑安装一次
1.安装nodejs（https://nodejs.org/en/） 验证 node -v(version) 使用npm
2.安装vue npm install vue
3.安装vue-cli npm install vue-cli -g 验证 vue -V 使用vue2.多次使用 ===>创建工程
本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范，
单元测试
webpack-simple 个人推荐使用, 没有代码检查 √browserify -> 自己看 browserify-simple cd C:\Users\admin\Desktop\vuecli 切换到G:盘 G: 打开vueaa文件夹 cd vueaa 返回上级目录 cd.. 4.vue init webpack vuethree 创建项目 5.cd vuethree 6.npm run dev 4.vue init webpack-simple vuethree 创建项目 5.cd vuethree 6.npm install 7.npm run dev3.想要安装 vue-resource====》使用
1.cd C:\Users\admin\Desktop\vuecli\vuethree 2.npm install vue-resource --save 3.npm run dev 4.打开main.js 写入：import VueResource from 'vue-resource' Vue.use(VueResource)4 vue-cli使用插件
–save 和 --save -dev 的区别
https://blog.csdn.net/sunhuaqiang1/article/details/852496561.按装插件 npm install vue-resource --save(生产环境)/–save -dev（开发环境） /空
2.先引入，在use
import vueResource from ‘vue-resource’
Vue.use(vueResource)
3.看文档，使用5.变化
index.html ====>Index.vuetemplate--->html script---->js style---->cssaxios
https://www.kancloud.cn/yunye/axios/234845
keep-alive https://www.jianshu.com/p/4b55d312d297
https://juejin.im/post/5a69894a518825733b0f12f2时间插件
http://momentjs.cn/
Npm install moment -S import moment from “moment”
import moment from ‘moment’
Vue.filter(‘dateFormat’, function (dataStr, pattern = “YYYY-MM-DD HH:mm:ss”) {
return moment(dataStr).format(pattern)
})配置全局请求网址前半部分
Vue.http.options.root = ‘http://vue.studyit.io’;Mock数据
Iview 主要是写后台管理系统
Reset-css https://www.npmjs.com/package/reset-css
import “reset-css”
初始化样式设置环境配置
1.Nodejs
2.mySQL https://dev.mysql.com/downloads/mysql/5.1.html#downloads
配置和安装 https://blog.csdn.net/qq_37350706/article/details/81707862#%E5%85%88%E5%8E%BB%E5%AE%98%E7%BD%91%E4%B8%8B%E8%BD%BD%E7%82%B9%E5%87%BB%E7%9A%84MySQL%E7%9A%84%E4%B8%8B%E8%BD%BD%E2%80%8B
初始账号和密码 root@localhost: >arjf*ayq30S其他
设置密码https://blog.csdn.net/numberseven7/article/details/99548745
查看是否有sql服务 sc query mysql
删除重新创建https://www.cnblogs.com/zhaocundang/p/8540746.html
端口占用https://blog.csdn.net/qq_32332777/article/details/89359661
2059错误链接https://blog.csdn.net/Long861774/article/details/827014873.Navicat Premium 12
4.启动服务node app.js
5.构建页面 写项目安装yarn(https://classic.yarnpkg.com/zh-Hans/docs/usage）
npm install -g yarn
查看版本：yarn --versionVue 如何使用 swiper
（npm命令https://blog.csdn.net/qq407949480/article/details/79988354）- 6.0.0 版本以上，会存在一些功能失效的问题
以下是使用规则：https://github.com/surmon-china/vue-awesome-swiper
2.换成低版本
你已经运行了下面命令
npm install swiper vue-awesome-swiper --saveor
yarn add swiper vue-awesome-swiper
解决：yarn add swiper@^5.2.0 npm install swiper@^5.2.0 --save
在 main.js中添加
import VueAwesomeSwiper from ‘vue-awesome-swiper’
import ‘swiper/css/swiper.css’
Vue.use(VueAwesomeSwiper, /* { default global options } */)使用：
http://a.itying.com/upload/20180417/1523969206225.jpg
循环加载图片https://www.cnblogs.com/SamWeb/p/8519735.htmlAxios
http://www.axios-js.com/
https://www.jianshu.com/p/e36956dc78b8
1.安装
npm install axios
cnpm install axios
yarn add axios
2.在 mian.js 中引入
import axios from ‘axios’
3.在 mian.js 中配置(还有其他配置，这里没讲)
Vue.prototype. h t t p = a x i o s 4. 使 用 t h i s . http= axios 4.使用 this. http=axios4.使用this.http
methods: {
show() {
this.$http({
method: ‘get’,
url: ‘/user’,
data: {
name: ‘virus’
}
})
}
扫一扫
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
