vue总结

xiaoxiao2022-07-06  9


某平台价值19860元的编程课程资料免费领取【点我领取】


vue基础语法讲解:

由饿了么公司开发 官网:https://cn.vuejs.org/

特点:

1.易用: Html+css+javascrirpt 比较容易 2.灵活: 层分离 设计模式 mvc (module view controller) mvvm 3.高效: 集成框架的库比较小 代码比较清楚 (可以直接操作dom)

vue环境的安装

1. 直接在页面里面引入文件。。。。script标签;

2.Npm安装 直接在cmd命令里面安装或者在gitbash里面安装

vue的基本语法

1.首先创建vue单页面应用程序 <script src="./js/vue.js"></script>

创建应用从创建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");
转载请注明原文地址: https://www.6miu.com/read-4968562.html

最新回复(0)