Vue 基础篇

Vue 基础篇一、框架与库的区别JQ库->DOM(DOM操作) + Ajax请求art-template库->模板引擎框架 -> 全方位、功能齐全简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 + …代码上的不同：一般使用库：调用某个函数，自己可以把控库的代码一般使用框架：其框架在帮我们运行已编写好的代码框架：初始化自身的一些行为执行你所编写的代码施放一些资源库：小而精框架：大而全 ( 框架包含了各种库 )二、起步引包直接用 <script> 引入CDNNPMnpm install –yesnpm install vue –save ( npm install vue -S )创建实例化对象 new Vue( options 对象 ) optionsel : 目的地( 选择器 )data : 数据属性 ( 既可以是一个对象，也可以是一个函数 )数据驱动试图：数据发生改变时，视图发生改变。除了数据属性，vue 实例还暴露了一些有用的实例属性和方法。他们都有前缀 $，如： $el，$data 。template : 模板内容优先级：如果 template 中定义了内容，那么有限加载 template；反之，加载 el 挂载的模板vue的模板语法：{{}} 双大括号插值同 react 中的 {}{{ 表达式 }}对象 ( 不要连续三个大括号 {{ { key : value } }} )字符串 {{ ’XXX‘ }}判断后的布尔值 {{ true }}三元表达式 {{ true ？ ‘正确’ : ‘错误’ }}可以用于页面中简单粗暴的调试注意：必须在 data 这个函数中返回的对象中声明设计模式：MVC 与 MVVMMVC：Ｍodel( 数据模型 )、View( 视图 )、Controller( 控制器 )数据不是主动展示到视图上的，它是靠控制器取到 model 然后展示到 view。MVVM：Model、View、ViewModelvue的设计模式为MVVM，只关注的是视图层三、指令 ( v-xxx )在vue中提供了一些对于页面+数据的更为方便的输出，这些操作就叫做指令比如html页面中的属性 <div v-xxx></div>指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关的DOM操作的绑定。常用指令v-text：元素的InnerText属性，其实就是给元素的innerText赋值，必须是双标签，跟{{}}效果是一样的，使用较少。v-html：元素的InnerHtml，其实就是给元素的innerHtml赋值。v-if：判断是否插入这个元素，相当于对元素的销毁和创建。appendChild()、removeChild()v-else-ifv-elsev-show：隐藏元素，如果确定要隐藏，会给元素的style加上 display:none;，是基于css样式的切换。v-if 与 v-show 的区别 ( 官网解释 )v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单的多——不管初始条件是什么，元素总会被渲染。并且只是简单的基于css进行显/隐切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁的切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。v-bind：绑定标签上的属性( 内置的属性和自定义的属性 )，v-bind:class=“box”，简写 : 。<div class=“container” :class="{active: true}"></div>// 渲染为 DOM<div class=“container active”></div>v-on：v-on:原生事件名 = ‘函数名’，简写 @ // html<div class=“container” @click=“clickHandler”></div>// jsmethods:{ clickHandler(e){ console.log(this); }}v-for：v-for=“item,index in arr”<ul> <li v-for=“item,index in list”> {{index}}–{{item}} </li></ul>v-model：数据双向绑定只会体现在UI空间中，只能应用在有value属性的元素。<input v-model=“msg”>// 等同于<input :value=“msg” @input=“msg = $event.target.value” />那么 v-model 其实就是 v-bind 和 v-on 的语法糖。四、组件1.局部组件局部组件使用打油诗：声子挂子用子声明子组件；父组件挂载子组件；父组件使用子组件。// 局部组件的声明var App = { data(){ return{ } }, template: <div>我是入口组件</div> }// vue实例new Vue({ el:"", data(){ }, // 挂载子组件 components:{ App }, // 父组件直接可以使用 template:<App />})组件命名： 1.短横线分隔命名：当引用组件时，也要使用短横线分隔形式。( 如： <my-compnent-name> ) 2.驼峰式命名：当引用组件时，可以使用短横线分隔形式或者驼峰形式。( 如： <my-compnent-name> 或 <MyCompnentName>) [注]：直接在DOM( 即非字符串的模板 )中使用时只有短横线分隔形式是有效的。 [建议]：命名时用驼峰形式，使用时用短横线分隔形式。2.全局组件Vue.component(“组件名”, options)// 全局组件声明// 第一个参数是组件的名字，第二个参数是options配置项Vue.component(“Vbtn”, { template: <button>按钮</button> })// 全局组件使用var App = { template: <div> ... <Vbtn /> </div> }五、组件通信1.通过 prop 往子组件通信1.Parent 2.Child先给父组件中绑定自定义的属性Vue.component(“Parent”, { data(){ return{ msg:“我是父组件的数据” } }, template: <div> <p>我是父组件</p> <Child :childData="msg" /> </div> })在子组件中使用 props 接收父组件传递的数据在子组件中任意使用Vue.component(“Child”, { template: <div> <p>我是子组件</p> <input type="text" v-model="childData" /> </div> , props:[“childData”]})2.通过事件向父组件发送消息在父组件绑定自定义的事件在子组件中触发原生的事件，在函数中使用 $emit 触发其父组件中自定义的事件$emit(“自定义的事件名”, “消息”)// ChildVue.component(“Child”, { template: <div> <p>我是子组件</p> <input type="text" v-model="childData" @input="changeValue(childData)" /> </div> , props:[“childData”], methods:{ changeValue(val){ // 自定义的事件一定要通过 this.$emit() 去触发 // $emit(“自定义的事件名”, “消息”) this.$emit(childHandler, val) } }})// ParentVue.component(“Parent”, { data(){ return{ msg:“我是父组件的数据” } }, template: <div> <p>我是父组件</p> <Child :childData="msg" @childHandler="childHandlerFn" /> </div> , methods:{ childHandlerFn(val){ console.log(val); } }})六、插槽 slot插槽：内置组件 slot，作为承载分发内容的出口/* 模拟 elementUI 按钮组件的实现 /// 子组件Vue.component(“Vbtn”, { template: <button class="default" :class="type"> <slot>按钮</slot> </button> , props:[“type”]})// 父组件var App = { template: <div> ... <Vbtn type="primary">登陆</Vbtn> <Vbtn type="success">注册</Vbtn> </div> }具名插槽// 子组件Vue.component(“liItem”, { template: <li> 第一个槽 <slot name="idx-1"></slot> 第二个槽 <slot name="idx-2"></slot> </li> })// 父组件var App = { template: <div> <ul> <liItem> <h1 slot="idx-1">我是第一个槽</h1> <h3 slot="idx-2">我是第二个槽</h3> </liItem> </ul> </div> }七、过滤器过滤器的作用：为页面中的数据进行添油加醋的功能分类局部过滤器全局过滤器/ 局部过滤器 /// 1.声明过滤器// 2. {{ 数据 | 过滤器的名字 }}var App = { data(){ return{ price:0, msg:“hello filter” } }, template: <div> <input type="number" v-model="price" />  <h2>{{ price | myCurPrice }}</h2> <h3>{{ price | myReverse }}</h3> </div> , filters:{ // 声明过滤器 myCurPrice: function(val){ return “￥” + val } }}/ 全局过滤器 */// 字符串反转过滤器Vue.filter(“myReverse”, function(val){ return val.split("").reverse().join("");}){{ 数据 | 过滤器的名字(可以传值) }}例： {{ price | myReverse(“这里是传入的值”) }} // 其中 arg 就是传入的值 Vue.filter(“myReverse”, function(val, arg){ return val.split("").reverse().join(""); })八、watch 监听watch 监听的是单个属性基本的数据类型 – 简单监视复杂的数据类型 – 深度监视监听简单数据类型new Vue({ el:"", data(){ return{ msg : ’’ } }, watch:{ msg: function(newVal, oldVal){ console.log(newVal, oldVal); } }})监听复杂数据类型 obj, arr, 等 – 深度监视new Vue({ el:"", data(){ return{ userList : [{name:“jack”}] } }, watch:{ userList: { deep:true, // 深度监视 handler: function(newVal, oldVal){ console.log(newVal, oldVal); } } }})九、计算属性计算属性 getter// html<img :src=“getCurSrc” /><ul> <li v-for=“item,index in dataList” @click=“clickHandler(index)” :class="{active: curIdx == index}">{{ index }}</li></ul>// jsnew Vue({ el:"", data(){ return{ dataList:[{imgsrc:‘1’},{imgsrc:‘2’},{imgsrc:‘3’}], curIdx : 0 } }, computed:{ // 计算属性默认只有 getter getCurSrc: function(){ return this.dataList[this.curIdx].imgsrc } }, methods:{ clickHandler(index){ this.curIdx = index; } }})计算属性 setter// jsnew Vue({ computed:{ getCurSrc: { set: function(newVal){ console.log(newVal); this.curIdx = newVal; }, get: function(){ return this.dataList[this.curIdx].imgsrc } } }, methods:{ clickHandler(index){ // 点语法 set方法和 get方法 // getter 方法 console.log(this.getCurSrc); // 调用set方法 this.getCurSrc = index; } }})十、生命周期beforeCreate：组件创建之前会调用created：组件创建之后会调用在created这个方法中可以操作后端的数据，数据驱动视图应用：发起Ajax请求beforeMount：挂载数据到 DOM 之前会调用mounted：挂载数据到 DOM 之后会调用应用：操作DOMbeforeUpdate：在更新DOM之前调用该钩子应用：可以获取原始的DOMupdated：在更新DOM之后调用该钩子应用：可以获取最新的DOMbeforeDestroy：组件销毁之前会调用destroyed：组件销毁之后会调用vue 内置组件 <keep-alive></keep-alive>：能在组件的切换过程中将状态保留在内存中，防止重复渲染DOM。activated：组件被激活了deactivated：组件被停用了