开发版本:包含完整的警告和调试功能
生产版本:删除了警告。
MVVM:
M:model,模型数据,从服务器端获得的数据。
VIEW:视图层,包含网页内容和样式
ViewModel:视图模型(控制器),代替之前的dom,jquery操作,自动把模型中的数据绑定到view中的指定位置。
{{}}:补缺。
指令:为HTML动态绑定属性
1:v-bind:属性名=“模型变量”。专门绑定属性值。简写(:属性名=“模型变量”)
2:v-for:根据数组的数据个数反复创建某个元素。
v-for=“(task,i) in tasks”,tasks是模型数据(数组)。
v-show和v-if的差别:都是隐藏元素。
v-if通过移除dom节点来删除元素,效率低,适合多个元素择其一显示。v-show是通过display的方式来显示隐藏。效率高,但只适合控制一个元素的隐藏显示
3:v-on:事件绑定。
v-on:click=fun($event)
,$event是jquery内置的事件对象。固定写法。
简写:@代替v-on;prevent
代替e.preventDefault();
stop代替e.stopProtagation()
@:click.prevent.stop=function()
fun(e){e.preventDefault()}
v-html:html代码片段会被解析
v-text:绑定纯文本。HTML代码不会被解析。
{{}}的功能和v-text基本一样。区别是:
(1)当网速慢时,补缺直接显示双花括号,而v-text处的内容则直接为空白。从用户体验角度考虑v-text更好。
(2)如果v-text所咋的标签有内容,则v-text会覆盖标签的内容。而{{}}不会。
v-cloak:解决{{}}的加载慢时显示双花括号问题,直接在元素里写v-cloak,然后设置样式。
[v-cloak]{display:none}
v-pre:如果想让{{}}不被vue解析,可为元素直接加v-pre属性。
v-once:元素只会在网页加载时加载数据,之后不再被监视,会从监视队列移除,数据不再改变。
双向数据绑定:v-model:value=“模型变量”,简写:v-model=“模型变量”
监听函数watch
当模型数据发生变化时自动执行的函数。如搜索建议,登录注册
自定义指令:
过滤器:当得到的数据不能直接使用,需要处理时。如:时间,状态,性别,
<script src="vue.js"></script>
<script>
Vue.filter("genderConvert",function (val) {//
return val==1?'男':'女'
})
</script>
<div id="app" v-cloak>
<span>{{gender|genderConvert}}</span>//第一个是原始值。第二个数据是定义的过滤器名。
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
gender:1
}
})
</script>
带参过滤器:
<script src="vue.js"></script>
<script>
Vue.filter("genderConvert",function (val,lang="zh-cn") {//第二个参数是
if(lang=="zh-cn"){
return val==1?"男":"钕"
}else{
return val==1?"male":"female"
}
})
</script>
<div id="app" v-cloak>
<span>{{gender|genderConvert(en-us)}}</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
gender:1
}
})
</script>
axios:基于promise,支持http请求的函数库。旧版vue的vue-resource被这代替。
客户端发送请求(vue-resource):
getImg(){
this.$http.get("goodslist").then(result=>{
this.list = result.body
console.log(this.list)
})
},
服务器端响应数据:
//这里的路径已经配置过。
//配置服务器根目录
Vue.http.options.root = ‘http://127.0.0.1:3000/’
app.get("/shopCart",(req,res)=>{
var obj = [
{id:1,title:"华为P10",price:2999,count:2},
{id:2,title:"华为P12",price:1999,count:3},
{id:3,title:"华为Pro",price:2999,count:2},
{id:4,title:"华为P9",price:3999,count:1},
]
res.send(obj)
})
组件:拥有专门的HTML,css,数据的可重用的页面局部结构.特点:重用,分工开发,低耦合。
1:定义组件模板:
<template id="myTpl">
<div>
<button>+</button><span>1</span><button>-</button>
</div>
</template>
</body>
<script src="vue.js"></script>
2:定义组件
<script>
Vue.component("myComp",{//组件名
template:"#myTpl",//模板的ID。
data:function () {//组件的data必须是函数,而且必须返回对象。
return{}
}
})
var app = new Vue({
el: "#app",
data: {}
})
//2:定义组件:
</script>
3:使用组件
<div id="app">
<ul>
<!--3:使用组件-->
<li><my-comp></my-comp></li>//此处的标签是组件名。
<li><my-comp></my-comp></li>
<li><my-comp></my-comp></li>
</ul>
</div>
vue实例的生命周期:
1:创建阶段:创建vue对象或组件对象及模型数据。
beforeCreate()//data和methods的数据都没有被初始化。所以拿不到他们的数据。
created()//此时,data数据和methods方法都已经初始化完成,可以输出data的数据使用。
2:挂在阶段:扫描真实dom树,创建虚拟dom树,并绑定模型中的数据到视图。
beforeMount()
:模板在内存中编辑完成,但是未渲染到页面。所以在页面不能正常显示。
mounted()
:已将把页面渲染结束,data的数据成功渲染到dom树。实例创建的最后一个周期。实例创建成功。可以操作dom树。
3:更新阶段:只要模型里的数据发生改变,就会更新组件的内容和dom树
beforeUpdate():数据只是在内存中完成了更新,并未渲染到页面。(data数据已经更新,但是页面并未更新)
updated()
4:销毁阶段:主动调用$destory()函数,销毁组件
beforeDestroy()//实例还没有被正在销毁。所有数据,方法都能正常使用。
destroyed()
组件分类:
1:根组件:
new Vue({
el:"app"
})
2:全局组件:
Vue.component("myComp",{//组件名
template:"#myTpl",//模板的ID。
data:function () {
return{}
}
3:局部组件:
只能用于特定的全局组件中。
组件同通信:
spa:single page application:单页面应用
整个应用程序只有一个完整的HTML文件,根据vue路由不同加载不同的组件。
单页面与多应用的对比:
1:多页面应用在页面跳转时会反复发送请求,单页面应用只在页面加载时发起一次。
2:多页面应用会删除整个dom树然后重建,单页面只是替换局部dom节点。
3:多页面加载页面间的公用资源也会反复请求下载,单页面在首次加载HTML文件时加载一次。
4:单页面很容易实现页面切换动画。
问题:spa首屏加载慢。解决:懒加载:按需加载。
vue路由:一个请求地址和一个组件的对应关系。
路由字典:包含多组路由键值对的集合。
Vue-router是vue中专门实现单页面应用的组件。需要单独下载。
命名视图:一个路由规则匹配多个组件例:
routes:[
{path:'/',components:{
'default':header,
'left':leftBox,
'main':mainbox
}}
]
<router-view name = "default"></router-view>
<router-view name = "left"></router-view>
<router-view name = "main"></router-view>
路由跳转:
1:<router-link to="/about">关于我们</router-link>
,传递参数需要用?追加。如:
<router-link :to="'/head/newsinfo?id='+item.id">
组件里接收参数:console.log(this.$route.query.id)
2:通过点击事件触发函数。
<a @click="product()">产品详情</a>
methods:{
product(){
this.$router.push("/product")///push相当于history记录栈。
//追加参数的两种方式:
this.$router.push('/head/shop/10')//(1)用/追加参数,需要设置路由:
{path:'/head/shop/:id',component:shopCont}//路由设置
console.log(this.$route.params.id)//组件接收参数
this.$router.push('/head/shop?id='+11)//(2)用?追加参数
console.log(this.$route.query.id)//组件里接收参数:
}
}
this.$router
VS this.$route
this.
r
o
u
t
e
封
装
了
当
前
地
址
的
信
息
。
t
h
i
s
.
route封装了当前地址的信息。 this.
route封装了当前地址的信息。this.router执行跳转任务
子组件:
1定义公用子组件:
2使用子组件:在其他组件的script标签里引用。
(1)import comment from "../sub/comment.vue"
(2)注册子组件:在script标签里
components:{
"comment-box":comment
}
(3)使用:
<comment-box></comment-box>
事件修饰符:
.stop:阻止冒泡。
.prevent:阻止标签默认行为。
.capture:实现捕获触发事件的机制。被此修饰符修饰的事件先触发。
.self:被此修饰符修饰的事件只有自己才可以触发,不会被冒泡触发。
.once:事件只能触发一次。
键盘修饰符:
@keyup.enter=“事件”:回车键的keyup事件。
vue 提供了一部分按键。没有提供的通过keyCodes。
:Vue.config.keyCodes.f2=113.
@keyup.113=“事件”:f2的keyup事件。
自定义指令:
全局指令:
Vue.directive("focus",{
bind:function(){//指令绑定到元素时,触发此方法。
},
inserted:function(el){//元素插入到dom时,执行此方法。
el.focus()
},
updated:function(){
}
})
<input v-focus></input>
Vue.directive("color",{
bind:function(el,binding){//指令绑定到元素时,触发此方法。
el.style.color=binding.value//和样式相关的一般在bind里.
},
inserted:function(el){//元素插入到dom时,执行此方法。
//和js行为相关的一般在inserted里。
},
updated:function(){
}
})
<input v-color="'blue'"></input>
私有指令:在Vue实例内:
directives:{
"fontweight":{
bind:funtcion(el,binding){
el.style.fontWeight = binding.value
}
}
}
<input v-fontweight="'500'"></input>
简写:
directives:{
"fontweight"::funtcion(el,binding){
el.style.fontWeight = binding.value//默认给钩子函数bind和update同时添加此方法。
}
}
watch:监听data数据的变化,从而触发watch里对应data数据的方法。
watch:{//data1和data2都是data里的属性。
data1:function(){},
data2:function(){}
}
监听路由改变:
watch:{//路由变化时自动触发。
‘$route.path’:function(newpath,oldpath){
console.log(newpath,oldpath)
}
}
计算属性:
computed:里的方法使用时当做普通属性使用。当computed里依赖的属性不发生变化时,computed不会重新计算,因为结果会被缓存。效率高。
vue组件里使用scss:
组件内部样式: