VUE

开发版本：包含完整的警告和调试功能
生产版本：删除了警告。
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.$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：

组件内部样式：