1.易用： Html+css+javascrirpt 比较容易 2.灵活： 层分离 设计模式 mvc （module view controller） mvvm 3.高效： 集成框架的库比较小 代码比较清楚 （可以直接操作dom）
2.Npm安装 直接在cmd命令里面安装或者在gitbash里面安装
创建应用从创建vue的实例开始写
new Vue({ });2.数据访问： 只要vue实例里面的数据属性中发生变化 就会去自动更新view Vue原则:数据的双向绑定 3.数据对比
var data={ a:1 } var vue=new Vue({ data:data//这个属性是vue对象自带属性 （写数据或者定义变量） }); console.log(vue.a===data.a); //数据的更新 /*vue.a=2; console.log(data.a);*/ //更新上边属性 data.a=2; console.log(vue.a);4.Data属性里面的声明方式：
new Vue({ data:{ //定义变量 a:10, arr:[], str:"123" } });5.Vue和页面元素关联 vue对象有默认属性 el:”选择器”
new Vue({ //将vue程序和页面元素进行关联 el:"#b", data:{ //定义变量 a:10, arr:[], str:"123", stu:null } });6.内置属性watch 监听 内外部写法
var vm=new Vue({ el:".b", data:{ str:"abc" }, watch:{ //监听属性的变化 str:function (newV,oldV){ // 这个回调将在 `vm.str` 改变后调用 } } }); //true vm.$el===document.getElementsByClassName("b")[0]; vm.$watch("str",function (nValue,oValue){ // 这个回调将在 `vm.str` 改变后调用 }) //外部写法7.生命周期钩子函数 created：function(){}
new Vue({ el:".b", created:function (){ // 生命周期钩子函数 在vue被创建实例化之后开始执行 console.log("created"); }, data:{}, watch:{ } });8.生命周期函数 mounted(el元素绑定时执行) Updated（在view视图层更新时执行）
new Vue({ el:".b", created:function (){ // 生命周期钩子函数 在vue被创建实例化之后开始执 行 console.log("created"); }, mounted:function (){ //当el元素更新之后直接开始执行 console.log("mounted"); }, updated:function (){ //当view视图层发生更新 开始执行 console.log("updated"); }, data:{ a:10 }, watch:{ } });9．模板语法 1)插值语法 （表达式 {{}}）
<div class="b"> <!--模板绑定语法--> <span>{{str}}</span> </div> <script> new Vue({ el:".b", data:{ str:"abc" } }); </script>v-once指令: 让数据绑定一次性 会影响当前节点的其他数据绑定 {{}} 和v-html 区别： 表达式直接绑定的是文本，v-html绑定的是html 特性（给元素的属性动态绑定值） v-bind 可以省略为 ：属性名称 ：class 10.v-bind在class这一块的多个和单个操作：
<div class="b"> <span v-bind:class="s_name"> {{str}} </span> <!--添加多个--> <span v-bind:class="[s_name,s_name1]"> {{str}} </span> <!--判断是否添加--> <span v-bind:class="{spanleft:iscolor}"> {{str}} </span> <!--动态绑定多个类名称--> <span v-bind:class="{spanleft:iscolor,spanright:iscolor}"> {{str}} </span> <span>{{iscolor}}</span> <button v-on:click="showName">按钮</button> </div>11.V-if 如果 v-else
<span v-if="iscolor">vue</span> <span v-else>mmmm</span>12.V-on指令 监听dom元素的事件 v-on:click=””
按钮2 事件的修饰符： stop 和 prevent
<button v-on:click.stop="">btn</button> <button v-on:click.prevent="">btn</button> <button v-on:click.prevent.stop="">btn</button> 事件v-on指令可以缩写 @click=””13.V-for 重复元素指令
<ul> <li v-for="(s,index) in stu"> {{s.name+" / "+s.sex +"/"+index}} </li> </ul> data:{ stu:[ {name:"m",sex:"n"}, {name:"a",sex:"s"}, {name:"d",sex:"c"}, {name:"w",sex:"q"} ] }14.vue实例对象里面两个属性 methods（声明方法） computed（计算属性） 注意： 这两个属性里面声明的方法在页面上使用，还有方法的传参
new Vue({ el:".b", created:function (){}, mounted:function (){}, data:{ str:"abc", stu:[ {name:"zhangsan"}, {name:"lisi"}, {name:"wangwu"} ] }, watch:{ }, computed:{ //只能执行一次 //逻辑代码 showinfo:function (){ return this.str="bbb"; }, liclick:function (){ alert(1); } }, methods:{ //主要写方法 showData:function (){ }, showindex:function (index){ this.liclick(); } } });15.v-show 显示隐藏指令 值为true false 16.组件的注册 components 两种注册方式：全局注册+局部注册
<div class="b"> <my-slider></my-slider> </div> //全局注册 /* Vue.component("my-slider",{ template:"<div>我是模板</div>" /!*templateUrl:"tem.html" npm安装的环境里面使用*!/ });*/ var tem={ template:"<div>模板</div>" } new Vue({ el:".b", components:{ "my-slider":tem }, data:{}, });模板页面里面传值 props:[“属性名称”],**注意：**你的属性全是小写，那传值和名称保持统一，如果你的命名规则是驼峰命名，传值用data-case 全转小写中间±，模板里面只能包含一个元素（父级元素）
组件里面有自带的属性： props template data （写成函数，里面返回对象） computed methods
Vue.component("my-slider",{ props:['bindstr'], template:"<div><div>{{bindstr}}</div><span>hh</span><span>{{show}}</span></div>", data:function (){ return { b:this.bindstr } }, computed:{ show:function (){ console.log(this.b); return this.b; } } });17.自定义指令 directive 全局注册+局部注册
<input type="text" v-focus="info" v-model="str"/> //自定义指令 全局注册 和局部注册 /*Vue.directive("focus",{ //使用钩子函数 /!*bind 钩子函数 是在指令绑定到元素的时候执行一次*!/ /!*inserted 被绑定元素在插入父元素的时候执行*!/ /!*update 当前的元素节点发生变化时执行*!/ /!*里面的第一个参数 ： 被绑定的元素*!/ //方法里面写的就是和dom元素操作有关的代码 bind:function (el){ }, inserted:function (el,binging){ el.value=binging.value; }, update:function (el,binging){ console.log(binging.oldValue); } });*/ new Vue({ el:".b", directives:{ focus:{ inserted:function (){ console.log(1); } } }, data:{ str:"aaa", info:"word" } });过滤器 对数据进行过滤 里面写的是逻辑代码 全局注册+局部注册 特殊的： v-for 不能直接使用过滤器得借助methods里面的方法来间接使用 {{num | sortnumber}} {{str | substr}}
{{stu | sexselect(sex)}} {{s.name+" / "+s.sex}}//过滤器 全局注册+局部注册 以及使用 /第一个参数: 管道符前面的数据/ Vue.filter(“sexselect”,function (value,sex){ //过滤器传值 var s=[]; for(var i=0;i<value.length;i++) { if(value[i].sexsex) { s.push(value[i]); } } return s; }); Vue.filter(“substr”,function (value){ if(value.length<10) { return value; } else{ value=value.substr(0,10)+"…"; return value; } }); Vue.filter(“sortnumber”,function (value){ for(var i=0;i<value.length;i++) { var temp; for(var k=0;k<value.length-i-1;k++) { if(value[k]>value[k+1]) { temp=value[k]; value[k]=value[k+1]; value[k+1]=temp; } } } return value; }); new Vue({ el:".b", data:{ num:[2,1,5,4,3,6,7], str:“部分数据备份v慧极必伤v回家不都是v空间都是垃圾的扩散hi局部可拒绝离开三次”, stu:[ {name:“huahua”,sex:“女”}, {name:“heihei”,sex:“男”}, {name:“xiaotao”,sex:“女”}, {name:“qingshui”,sex:“男”} ], sex:“男”, money:100000000 }, methods:{ showstu:function (sex){ return this.stu.filter(function (value){ if(value.sexsex) { return value; } }); } } });
19.路由 location 根据location的路径来跳转页面 Vue-router 组件 配置路由的入口 router-link 编译完 为a
第一个 第二个 第三个 路由的出口 配置路由路径 以及和vue对象关联 /*配置路由先配置入口和出口*/ //配三个模板 var home={template:"<span>第一个页面</span>"} var my={template:"<span>第二个页面</span>"} var pro={template:"<span>第三个页面</span>"} //创建路由的实例 var router=new VueRouter({ routes:[ {path:"/home",component:home}, {path:"/my",component:my}, {path:"/pro",component:pro} ] }); new Vue({ router }).$mount("#b");