Vue的基本使用

社区资料：Vue：专业中文社区

vue官方手册：API —

一、vue的介绍

vue是一套构建用户界面的渐进式框架，Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

vue是基于MVVM（M:model V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model)

补充：

MVC设计模式：

M model 数据层 V view 视图层 C control控制层

二、vue的安装

2.1 下载直接引入

<script src=""></script>

2.2 通过CDN加载

<script src="/ajax/libs/vue/2.1.8/"></script>

2.3 npm安装





npm install vue -g 




npm install vue-cli -g

三、vue的基本使用





<div id="app"> 



h2>{{msg}}</h2> 




</div> 




<script> 





const vm = new Vue({



 



 el:'#app',//el为vue的作用范围




 



 //data为vue的数据 





data:{ msg:'hello ' }, 



 



//定义函数方法 




methods:{



 



 } 



}) 



</script>

四、vue的常见指令（重点）

4.1 vue的插值




方式一：双大括号绑定数据 <h2>{{msg}}</h2> 



方式二：v-html指令 <h2 v-html="msg"></h2> 



方式三：v-text指令 <h2 v-text="msg"></h2>

v-html和v-text的区别？

v-html可以解析标签和文本,而v-text只解析文本内容。

4.2 vue中的条件语句




v-if



v-else 



v-else-if



 



 



 




<p v-if="false">出去到处浪</p> 



 




<p v-else>好好呆在家</p> 



 




<p v-if="isActive">出去到处浪</p> 




<p v-else>好好呆在家</p> 



 




<p v-if="score>=90">你真棒</p> 




<p v-else-if="score>=60">还行，继续努力</p> 




<p v-else>你是猪吗？</p>

4.3 vue的显示隐藏




方式一：v-if隐藏 <p v-if="false">我们来玩捉迷藏</p> 



方式二：v-show隐藏 <p v-show="false">你来找找我在哪儿</p>

v-if和v-show的区别：

v-if 隐藏是直接将该元素移除

v-show是将元素设置为display:none进行隐藏

4.4 vue的循环语句




语法：v-for="item in items"



 



 



 




<p v-for="val in arr">{{val}}</p> 



 




<p v-for="(val,index) in arr">{{index}}{{val}}</p>




 




<p v-for="(val,key,index) in person">{{index}}{{key}}{{val}}</p> 



 




<!-- 定义key的写法 key的值为数组，对象的排列顺序 默认从0开始--> 




<p v-for="item in arr" :key=""></p>

4.5 vue的样式绑定

在vue中，我们采用v-bind来绑定属性和class样式

class属性的绑定,可简写为‘ ：’：




方式一：传入对象的方式 属性为：class类名 属性值为boolean值 




<p v-bind:class="{text:false}">你们想不想回公司</p> 




<p v-bind:class="{text:isActive,bg:true}">你们想不想回公司</p> 



 



方式二：传入数组 




<p v-bind:class="[colorActive,bgActive]">成都昨天已经全部清零</p> 



 



方式三：内联样式（不推荐） 




<p v-bind:style="{color:'green',fontSize:'20px'}"></p> 



注意：在v-bind:绑定属性和class样式时，可以简写为':'

4.5 vue的事件处理




方式一：事件直接修改内容 




<button v-on:click="num+=1">点击加一</button> <h2>{{num}}</h2> 



 



方式二：事件触发函数方法 




<button v-on:click="changeColor()">点击触发函数</button> 




<p :class="{text:isActive}">今年就业困难</p> 



 



const vm = new Vue({ 



    el:'#app', 



    data:{ 



        num:0, 



        isActive:false 



    }, 



    // vue内函数方法放在methods内 



    methods:{ 



    // 定义一个changeColor方法.点击时切换class样式 



            changeColor(){ 



    // 访问data内的属性需要添加this 



                () 



                 = !; 



        } 



    } 



})

事件修饰符




.stop 阻止事件冒泡行为 



.prevent 阻止事件默认行为 



.capture 使用事件捕获模式 



.self 阻止事件委派（只能当前元素触发事件而不是子元素）



.once 事件只触发一次



 



 



 




<!-- 阻止事件冒泡 --> 




<div class="father" v-on:click="fatherSay"> 



    <div class="son" v-on:="sonSay"></div> 




</div> 



 




<!-- 阻止事件默认行为 --> 




<a href="" v-on:="sonSay">跳转小米</a> 



 




<!-- once只触发一次 --> 




<button v-on:="num+=1">点击一次</button>




 



按键修饰符



 



.enter 回车键 



.tab tab键 



.delete (捕获 "删除" 和 "退格" 键) 



.esc ESC键 



.space 空格键 



.up 上键 



.down 下键 



.left 左键 



.right 右键 



.ctrl Ctrl键 



.alt alt键 



.shift shift键 



.meta meta键 



.enter 回车键 



.tab tab键 



.delete (捕获 "删除" 和 "退格" 键) 



.esc ESC键 



.space 空格键 



.up 上

注意：v-on:可以简写为'@'

4.6 vue的数据双向绑定





<!-- v-model绑定数据 --> 



单价：<input type="text" v-model="price"><br> 



数量：<input type="number" v-model="num"><br> 




<h2>小计：￥{{price*num}}元</h2> 



new Vue({ 



    el:'#app', 



    data:{ 



        price:10, num:1 



    } 



})

4.7vue的表单

vue中采用v-model进行数据双向绑定

表单中常见的使用：





<!-- 输入框 --> 




<h2>输入框</h2> 



输入框：<input type="text" ="msg"> 




<p>输入的内容为：{{msg}}</p> 



 



 




<!-- 文本域 --> 




<h2>文本域</h2> 



    <textarea name="" id="" cols="30" rows="10" v-model="msg2"></textarea> 




<p>文本域输入内容为：{{msg2}}</p> 



 



 




<!-- 单选框 --> 




<h2>单选框</h2> 



    <input type="radio" name="sex" v-model="sex" value="男">男 



    <input type="radio" name="sex" v-model="sex" value="女">女 



    <input type="radio" name="sex" v-model="sex" value="保密">保密 




<p>单选框选中的为：{{sex}}</p> 



 



 




<!-- 复选框 --> 




<h2>复选框</h2> 




<p>你最想吃啥:</p> 



    <input type="checkbox" name="foods" value="重庆火锅" v-model="foods">重庆火锅 



    <input type="checkbox" name="foods" value="冰淇淋" v-model="foods">冰淇淋 



    <input type="checkbox" name="foods" value="麻辣小龙虾" v-model="foods">麻辣小龙虾 



    <input type="checkbox" name="foods" value="辣条" v-model="foods">辣条 




<p>复选框选中的为：{{foods}}</p> 



 




<!-- 下拉框 --> 




<h2>下拉框</h2> 




<select name="city" id="" v-model="city"> 



    <option value="武汉">武汉</option> 



    <option value="成都">成都</option> 



    <option value="美国">美国</option> 



    <option value="意大利">意大利</option> 




</select> 




<p>下拉框选中的内容为：{{city}}</p> 



 



 



const vm = new Vue({ 



    el:'#app', 



    data:{ 



        msg:'',



        msg2:'', 



        sex:'男', 



        foods:['麻辣小龙虾','辣条'],//复选框需要传入一个数组 



        city:'', 



        age:'', msg2:'' 



    } 



})

表单修饰符




.lazy 输入框再change事件中同步 



.number 将用户输入的内容自动转换为number类型 



.trim 将去除用户输入的内容的首尾空格

4.8 vue中的自定义指令（了解）





Vue.directive(指令的名字,{指令执行的方法}) 




Vue.directive('focus', { 



// 当绑定元素插入到 DOM 中。 




inserted: function (el) 



    { 



        // 聚焦元素 




        el.focus() 



    } 



})

五、计算属性

在vue内计算属性的关键词为：computed





<div id="app"> 



    <!-- 调用computed的方法时，不需要加小括号 --> 



    <p>{{splitStr}}</p> 




</div> 



 



const vm = new Vue({ 



    el:'#app', 



    data:{ str:'你们现在看过招聘信息吗' }, 



    computed:{ 



// 定义一个拆分字符串的方法 所有的计算操作都放到了vue的实例中 



        splitStr(){ 



            return ('') 



        } 



    } 



})

methods和computed的区别

我们可以使用 methods 来替代 computed，效果上两个都是一样的。

但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

六、实例方法/数据




vm.$watch 监听数据的变化 



vue.$set 为数组和对象添加指定的值 



vue.$delete 为数组和对象删除指定的值

6.1 vm.$watch的使用

vue中watch属性可以去响应数据的变化




方式一：全局监听



监听的内容发生改变则触发函数



vm.$watch(监听的内容，function(){



    



})



 



方式二：局部监听   推荐使用



  watch:{



      //写法一：不能深度监听




      items(){



		  Storage.save('todoList',this.items)



	  }



      //写法二




	  // 当items发生改变则自动调用handler函数




	  items:{



		  // 必须为handler函数




		  handler(){



			  Storage.save('todoList',this.items)



		  },



              deep:true//深度监听，可检测到数组中某个对象属性的变化




	  }



  }

6.2 vm.$set的使用




语法：vue.$set( target, propertyName/index, value )



 



 this.$set(obj,'isFinished',true);

6.3 vm.$delete的使用




vue.$delete( target, propertyName/index )



 




this.$delete(this.items,i)

七、vue中组件

7.1 组件的作用

组件（component）是vue中最强大的功能之一。可以拓展html标签，可以封装可重用性的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

组件的划分：根据结构划分、根据功能划分

7.2 组件的使用步骤





1、定义组件，并将组件导出



（在src/components文件夹内新建一个.vue后缀的文件作为组件）



每一个.vue文件由templete、script、style构成



注意：子组件内style可以写上scoped属性，限制当前的css样式只对当前的组件生效



组件的名称一般首字母大写



 




2、引入组件



语法：import 自定义组件名 from '组件路径'




注意:



    1、若导入的文件名为vue后缀则可以省略（vue中可以自动识别.vue文件后缀）



    2、导入的路径可以写绝对路径（@默认代表项目中的src目录）



 




3、在局部components内注册组件（多个组件之间采用逗号连接）



  components: {



        Head:Head,



	Content:Content




  }



  简写为：



  components: {



    Head,Content




  }



 



 




4、使用组件（相当于使用标签）



方式一：



<自定义的组件名 />(建议使用)



 



方式二



<自定义的组件名><自定义的组件名 />



 



注意：写成双标签的形式，一般标签内不能写任何html代码

7.3 组件间通讯（重点）

7.3.1 父组件向子组件传值

父组件向子组件使用props传值

步骤如下：

1、在父组件内使用v-bind:绑定一个属性

<ContentComponent :fatherSay="msg"/>

2、在子组件内定义props接收自定义属性（和父组件定义的属性同名）





export default {



  name:'contentCompont',



  data () {



    return {



    }



  },



  //props为一个数组




  props:['fatherSay']



  



}

7.3.2 子组件向父组件传值




使用 $on(eventName) 监听事件



使用 $emit(eventName) 触发事件

实现步骤：

1、在子组件内通过emit触发一个自定义事件





<button @click="send">向父组件传值</button>




methods:{



    send(){



        // 通过emit向父组件传值  emit(eventname,传递的内容)



        this.$emit('sonSay','我会好好学习');



    }



}

2、在父组件内监听自定义的事件




<ContentComponent  @sonSay="toldMe"/>



//该data数据的内容会自动获取到emit事件携带的内容



methods:{



    toldMe(data){



        (data)



    }



}

7.4 组件中插槽slot的使用

7.4.1 slot的作用的理解

在子组件内使用特殊的元素<slot></slot>就可以为子组件开启一个slot(插槽)。在父组件的模板内，插入在子组件标签内的所有内容将代替子组件的<slot>标签及其内部的内容

7.4.2 单个插槽的使用

父组件：




<template>



  <div id="app">




	<HeadComponent>




        <p>父组件使用插槽</p>




        <p>{{msg}}</p>




	</HeadComponent>




  </div>




</template>

子组件：




<template>



  <div>




	<slot>




        <!-- 子组件内插槽slot内容只有在父组件未传值时使用 -->




        <p>子组件默认插槽信息</p>




	</slot>




  </div>




</template>

7.4.3 命名插槽的使用

父组件：




<template>



  <div id="app">




	<HeadComponent>




        <p>父组件使用插槽</p>




        <p slot="last">使用命名插槽last</p>




        <p>{{msg}}</p>




        <p slot="first">使用命名插槽first</p>




	</HeadComponent>




  </div>




</template>

子组件：




<template>



  <div>




	<!-- 默认插槽 :接收所有父组件内未使用slot定义的标签-->




	<slot></slot>




	



	<!-- 命名插槽:根据slot名字找到对应的替换位置 -->




	<slot name="first"></slot>




	<slot name="last"></slot>




  </div>




</template>

8 全局配置

全局配置需要写在中的new Vue之前，引入Vue之后

所有的全局配置的属性都在

例如：




// 自定义按键修饰符



//的写法




Vue.config.keyCodes.f2 = 113;



 



//在中使用



<input type="text" @keyup.f2 = "getMsg">

9 全局API





Vue.extend 




Vue.nextTick





Vue.set 




Vue.delete





Vue.directive 自定义指令




Vue.filter 过滤器




Vue.component 注册组件




Vue.use 注册插件




Vue.mixin





Vue.compile





Vue.observable





Vue.version

过滤器的使用

作用：将数据格式化成所需要的格式：比如时间、价格

9.1.1 全局过滤器：任意组件都可以使用




main.js中定义：




Vue.filter('formatMoney',function(value){



	// value自动获取管道符之前的内容




	return '￥'+value.toFixed(2)+'元';



})



 



//组件中的使用



<template>



  <div >



	单价：<input type="text" v-model="price"><br>



	数量：<input type="number" v-model="num"><br>



 // |叫做管道符



	<h2>总计:{{price*num | formatMoney}}</h2>



  </div>



</template>



 



注意：'|'叫做管道符



管道符前面的为需要格式化的数据



管道符后为格式化数据的过滤器方法，该方法会自动传入需要格式化的数据

9.1.2 局部过滤器:只作用于当前组件




<template>



  <div id="app">




	单价：<input type="text" v-model="price"><br>




	数量：<input type="number" v-model="num"><br>




	<h2>总计:{{price*num | formatMoney}}</h2>




	<h2>总计:{{price*num | money}}</h2>




  </div>




</template>



 



export default {



  name: 'App',



  data(){



	return{



		price:15,



		num:1



	}  



  },



  filters:{



	  // 局部过滤器



	  money(value){



		  return '$'+(2)+'美元';



	  }



  }



}

格式化时间插件（moment）的使用

1、安装插件

npm install moment --save-dev

2、引入moment插件

import moment from 'moment';

3、定义过滤器




  filters:{



	  // dateStr不需要手动传入  由管道符自动传入




	  formatDate(dateStr,pattern='YYYY/MM/DD HH:mm:ss'){



		  return moment(dateStr).format(pattern)



	  }



  }

4、在组件内使用过滤器




<template>



  <div id="app">




	<h2>{{time | formatDate('YYYY年MM月DD日 HH时mm分ss秒')}}</h2>




	<h2>{{time | formatDate}}</h2>




  </div>




</template>

10、生命周期

生命周期函数也叫做钩子函数，可以自动绑定this到上下文，可以访问数据（data）、方法(methods)、计算(computed)等

注意：不能使用箭头函数定义生命周期的方法

常见的生命周期函数：

分为四大类：

1、创建前后 beforeCreate created

2、挂载前后 beforeMount mounted

3、更新前后 beforeUpdate updated

4、销毁前后 beforeDestroy destroyed

beforeCreate:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created:在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。

beforeMount:在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted:实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。

注意： mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick

beforeUpdate:数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed:实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

11、vue项目打包

语法：npm run build

打包后页面空白

解决方案：

1、找到config下面的配置文件。

2、找到build下的assetsPublicPath,将'/'改为'./'

3、mode模式必须改为hash模式（模式不能为history，history需要后端的支持）

问题二：打包后背景图片不显示