Vue入门学习--Vue指令

框架和库的区别

框架是有一套自己的生态系统的
库是没有自己的生态系统的， 它就是一个工具

Vue的基本知识

• Vue的概念
  Vue是一套用于构建用户界面的渐进式框架
• 架构模式：MVVM
  M：Model 表示数据
  V： View 表示视图
  VM：ViewModel(视图模型) 表示逻辑
• Vue的模板语法 mustache语法
  模板语法支持性还是很高的，数据类型都是支持的，但是不支持 输出语法 （ console.log alert ）
  写法格式：

   <p> str: {{ str }} </p>
  

Vue 的使用流程

• 使用script标签引入Vue.js
• 实例化全局暴露的变量Vue构造器函数得到一个实例
• 配置Vue构造器函数中的配置项，一个配置项一个功能
  • el – 将id为app的一部分DOM结构当做模板传入配置项，然后挂载在页面中
  • data – 用来定义数据的
• 将数据展示在视图中，通过使用 双大括号语法 （ mustache 语法 ） 来展示数据
• 这时候我们发现在我们的模板（DOM结构）中可以使用 javascript语法，那么我们把这个类型称之为 ‘jsx语法糖’
• 当我们将数据修改后发现，视图就会更新，这种情况我们称之为‘数据驱动（视图）’

Vue 指令

指令的作用：指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM， 以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM， 这个指令需要模板语法的支持，所以我们采用jsx语法糖

• v-html 将一个数据展示在一个DOM内容中，功能类似于 innerHTML( html属性 )
  可以防止脚本攻击

  <p v-html = "msg" style="" >  </p>
  

• v-text 非转义输出
  与v-html的区别：
  1.如果数据里存在标签，v-text不会解析标签，直接将数据原样渲染；v-html会解析标签；
  2.如果数据里不存在标签，那么两者无区别；

  	<h3> v-html </h3>
      <p v-html="str"></p>
      <hr>
      <h3> v-text </h3>
      <p v-text="str"></p>
  	```
  	```javascript
  	new Vue({
  		el:'#app',
  		data:{
  			str:'<i>情人节快乐</i>'
  		}
  	})
  

  输出结果：
  

• v-bind 单项数据绑定
  使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind
  格式：

  <input type="text"  v-bind:value = "val"/>
  

  简写：

  <input type="text" :value = "val"/>
  

• class 类有两种写法,推荐数组形式

  对象形式

  <div :class = "{[size]:true,[color]: true,[box]: true}"></div>
  <div :class = "{[size]: 5>2?true:false,[color]: true,[box]: true}"></div>
  

  数组形式

  <div :class = "[size,box,color]"></div>
  <div :class = "[class_flag?size:'',box,color]"></div>
  

  new Vue({
  	el: '#app',
  	data: {
    		msg: '情人节快乐',
    		size: 'box_size',
   		color: 'box_color',
    		box: 'box',
    		class_flag: true
  	}
  })
  

• style 样式有两种写法
  对象形式

    	<div :style = "{width:'100px',height: '100px',background: 'blue'}"></div>
      <div :style = "style"></div>
  

  数组形式

   	<div :style = "[style,border]"></div>
  

• v-if 操作的是一个DOM的生成和销毁,v-if 如果值为false，那么绑定的DOM就会被销毁,v-if的初始值时false，那么这个DOM元素是不会渲染的
  有三种使用形式
  - 单路分支
  - 双路分支
  - 多路分支

   	<h3> v-if 单路</h3>
      <p v-if="flag"> 单路分支 </p>
      <h3> v-if 双路 </h3>
      <p v-if="flag"> 双路1 </p>
      <p v-else> 双路2 </p>
      <h3> v-if 多路 </h3>
      <p v-if="type === 'A' "> A </p>
      <p v-else-if=" type === 'B'"> B </p>
      <p v-else> C </p>
  

• v-show 操作的是一个DOM的dispay样式属性,v-show不管初始值是什么，它都会渲染出来

  	<p v-show = "flag"> 千锋教育 </p>
  

  v-if 与 v-show的区别：
  一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

• 列表渲染
  v-for 是用来做列表渲染的
  格式

  	 <ul>
          <li v-for=" n in num "> {{ n }} </li>
      </ul>
       <ul>
          <li v-for=" s of str"> {{ s }} </li>
      </ul>
       <h3> arr - v-for 带参数的 </h3>
      <ul>
          <li v-for="( item , index) in arr ">
              <p> item -- {{ item }} </p>
              <p> index ---{{ index }} </p>
          </li>
      </ul>
  

  注意：
  每次列表循环的后面都要绑定一个key,是为了进行DOM的唯一标识，这样就不会让vue因为惰性而影响列表的正常渲染，理想的key是使用数据中的id

• 表单数据双向绑定
  v-model
  双向数据绑定原理/数据驱动/深入响应式原理：
  vue是通过数据劫持和事件的发布订阅来进行数据驱动的，当我们在data选项中定义数据后，vue会通过observer（观察者）监听data选项，将data选项中的所有key通过es5的Object.definedPropty进行getter和setter设置，当数据绑定在DOM上是，就会触发getter,给DOM设置初始值，当我们在V(视图中)输入内容时，就会触发setter,就可以获得最新的值，通过watch（监听）通知Vue进行V(视图)重新渲染

• 数据的更新检测

  • 使用以下方法操作数组，可以检测变动
    push() pop() shift() unshift() splice() sort() reverse()；
  • filter(), concat() 和 slice() ,map(),新数组替换旧数组
  • 不能检测以下变动的数组
    vm.items[indexOfItem] = newValue
    解决 Vue.set(example1.items, indexOfItem, newValue)
    vm.items.length = 0
    解决 splice

• 事件 v-on

  <button v-on:click='normalHandler'> 普通事件 </button>
  <button @click='normalHandler'> 普通事件-简写 </button>
  

  事件可以传参，如果参数中有事件对象，在方法调用的时候，使用一个叫做 $event的作为实际参数

  <button @click="argu_event_handler( a,b,$event )"> 事件传参 - 事件对象 </button>
  

  事件修饰符
  .stop
  .prevent
  .capture
  .self
  .once
  .passive

  <div id="app">
      <div class="big" @click="big">
          <div class="middle" @click.self.stop="middle">
              <div class="small" @click.stop="small"></div>
          </div>
      </div>
  </div>
  

  按键修饰符
  .enter
  .tab
  .delete (捕获“删除”和“退格”键)
  .esc
  .space
  .up
  .down
  .left
  .right

  <div id="app">
      <input type="text" @keyup="get_user_input">
      <input type="text" @keyup.enter="get_user_shuru">
  </div>