Vue 基础-优快云博客

博客围绕Vue框架展开，介绍了模板语法，包括插值、指令和缩写，探讨了MVVM框架中各部分对应关系。还阐述了class与style的绑定，如HTML Class和内联样式，以及条件渲染、事件处理、列表渲染和表单控件绑定等内容，包含实用面试题。

1.模板语法

(1)插值

	a.文本 {{}}  

	 {{ msg }}

  		是   this.msg 简写

	this.$data.msg -> this.msg -> msg

b.纯HTML    

	v-html ，防止XSS,CSRF

c.表达式

(2)指令：是带有 v- 前缀的特殊属性

 v-bind   

v-if v-show  

	v-on:click  

v-for

(3)缩写

v-bind:src =>  :src  

v-on:click  => @click 



mustache语法糖对数据类型的支持（ js语法的支持 ） 

数据类型：

  		第一种划分：

    		基础数据类型： number string boolean

    		复杂数据类型: Object( array  function )

    		特殊数据类型: null undefined

 		第二种划分：

    		初始数据类型: number string boolean null undefined

    		引用数据类型: object( array function )



结论： mustache支持我们js的数据类型的 



conosle.log  和  alert  在我们mustache语法中是不支持的 



 mustache 绑定 dom的属性 

  

案例： v-html

	分析： 发现dom元素直接有了一个内容

    这种属性绑定就是为了操作dom



	结论： 这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字

        	Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ）

       	 Vue 2.0 统称为 ‘指令



	指令是用一个  v-xxx   表示



       	指令是用来操作dom



    	Vue中不允许直接操作dom



    	mustache语法   ---  属性写法 的属性值是直接写数据的，不需要使用 {{ }}

问题：我们说vue是 MVVM 框架，那么谁是 M 谁是 V 谁是 VM ？

 M： Model    数据

  	V： View     视图

 	 VM: ViewModel  视图模型（  new Vue() ）

2.class 与 style

(1)绑定HTML Class

 -对象语法 

 -数组语法

vue中如何给dom添加类名

直接在dom上绑定类名

vue中类名绑定 - 对象形式

	目的： dom身上属性class  要和  数据绑定 

	解决：v-bind

   数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样



   		 <p :class = "{ size,bg_color }"></p>

       		 size是自定义的属性， 它的属性值是undefined， 相当于是false

   		 <p :class = "{ size: true, bg_color: true }"></p>

       		 size也是自定义属性，他的属性是true,那么就会加上去

   		 <p :class = "{ [s]: true, [bg_color]: true }"></p>

      

格式： v-bind:class = "{ 属性： boolean }"

格式： v-bind:class = "{ [data]： boolean }"

vue中类名绑定的形式 - 数组的形式【推荐】
```
格式： v-bind:class = "[ 数据 ]"
```
类名绑定不会覆盖原先的类名
为什么要绑定类名

指令是用来操作dom

目的：为了将来通过数据来操作类名，类名操作dom

(2)绑定内联样式

 	-对象语法 

	-数组语法 



样式的绑定： 

  v-bind: style = ""

  \1. 对象的形式

  \2. 数组的形式

3.条件渲染

 (1)v-if  

(2)v-else v-else-if  

(3)template v-if ,包装元素template 不会被创建

(4)v-show 



指令： ( 是绑定在dom属性上 )

    v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了  innerHTML ）)

    v-text：可以将一个数据展示在一个dom的内容中（ 相当于使用了  innerHTML ）

    条件渲染的指令

      v-show 

        可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）

      v-if

        可以控制一个dom的存在与否（ 创建 和 销毁 ）

      v-else

      v-else-if 



v-for

  \1. 数组  v-for = " (item,index) in arr "       item是arr中每一个元素

  \2. 对象  v-for = "(item,key,index) in obj "        item是obj的属性值

  \3. json类型数据

  \4. 嵌套类型数据



 key: 

  给没一个循环的列表添加一个唯一的标识



  使用指令 v-bind 来绑定 key

  	<div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>



  如果有id，那么我们就使用id，如果没有，我们才会选择index



  v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上



  简写

  	<div v-for = " (item,index) in lists" :key = " item.id "></div>

面试题（实用题）【钻石】

 \1. v-if  vs  v-show 区别？

 \2. 实用： 项目中 如何选择这两个使用



      - v-if 操作的是dom元素（ 组件 ） 的创建或是销毁

      - v-show 操作的是dom元素的display属性

      - v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支

      - v-show 只能写一个单路形式



      一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

      因此，如果需要非常频繁地切换，则使用 v-show 较好；

      如果在运行时条件很少改变，则使用 v-if 较好。

4.事件处理

(1)监听事件-直接触发代码

(2)方法事件处理器-写函数名

    (3)内联处理器方法-执行函数表达式

	(4)事件修饰符 https://cn.vuejs.org/v2/guide/events.html

(5)按键修饰符



事件

   		v-on使用



   		事件源

   		事件绑定形式

   		事件类型

   		事件处理程序



   v-on:eventType = " handlerName "

   简写  v-on:    --- > @





事件

    	问题： javascript事件添加有几种形式

    	\1. 事件绑定

          		dom.onclick = function () {}

          		dom: 事件源

          		on: 绑定事件的形式

          		click: 事件类型

          		function（）{} 事件处理函数



      	\2. 事件监听 ： addeventListener 

      	\3. 直接在标签中绑定事件

          		<div onclick = "事件名称"></div>



      	vue采用了第三种，也是通过属性的形式绑定在dom身上 

         		<div v-on:click = "事件名称"></div>



	问题： 函数调用有哪些方法？

      		直接调用 ()

      		事件



		事件对象也可以正常使用



    		在事件处理程序中， 写e就可以了



	问题： 如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现



  		分析： 我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined



  		解决： 在函数执行时，传入一个实际参数 $event 来代表事件对象

5.列表渲染

	(1)v-for  (特殊 v-for="n in 10")  

	a. in 

	 b. of 

(2)key：

		 *跟踪每个节点的身份，从而重用和重新排序现有元素 

		*理想的 key 值是每项都有的且唯一的 id。    

(3)数组更新检测    

	a. 使用以下方法操作数组，可以检测变动   

    		push() pop() shift() unshift() splice() sort() reverse()



    	b. filter(), concat() 和 slice() ,map(),新数组替换旧数组



    	c. 不能检测以下变动的数组



      		vm.items[indexOfItem] = newValue     

  			解决  (1)Vue.set(example1.items, indexOfItem, newValue)           

 			 (2)splice



 	(4)应用:显示过滤结果 





		问题： 下标是不能检测变动的，但是我们现在看到了它检测到了



		问题： 如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动 



	 解决方法： 使用splice



		问题： 我们直接修改一个数组下的一个数据时，发现下标不能检测变动了



		解决方法： 使用 Vue.set / this.$set

6. 表单控件绑定/双向数据绑定

	v-model  

		双向数据绑定

  			默认绑定value值

  			v-model应用于表单元素	

	(1)基本用法  

		 -购物车   

	(2)修饰符     

		.lazy :失去焦点同步一次    

		 .number :格式化数字     

		.trim : 去除首尾空格