全面了解Vue基础知识（实例、指令）

全面了解Vue基础知识（实例、指令）

一、vue 应用的组成

1 - vue 实例

• 一个vue应用由一个根实例及多个嵌套的、可选的组件树构成

<div id="app">
    {{message}}
    <todo-list/>
</div>

<script>
  // 组件
  Vue.component('todo-list', {
    data() {
      return {
        message: "this is a component"
      }
    },
    template: `
      <div>{{ this.message }}</div>
    `
  })

  // vue 根实例
  let vm = new Vue({
    el: '#app',
    data: {
      message: 'hello vue'
    }
  })
</script>

  // 渲染结果
  hello vue
	this is a component

• 根实例：一个vue应用中只存在一个根实例，根实例的data是一个对象
• 组件树：每一个组件都是vue的一个实例，他们接收和根实例一样的参数配置项（el属性除外），同时因为每一个组件都是vue的实例，为了避免数据污染，组件的data都必须通过一个函数返回以保证数据只在规定的组件内生效。

2 - vue中的响应式数据

• 在vue中数据都是响应式的，即修改了数据后会自动响应到视图上，不需要手动操作dom来修改视图的显示。
• 注意事项：
  • 如果需要将某个数据作为响应式数据，则在初始化时就需要将其写在data属性中，后续给data属性追加的对象无法进行响应式处理。
  • 冻结的对象无法进行响应式处理

3 - 生命周期

每一个vue实例都有自己的生命周期，它们从初始化 -> 更新 -> 销毁 会进行一系列的操作。同时vue也给出了每个生命周期时对应的周期钩子。

• 初始化相关
  • beforeCreate：初始化事件和生命周期
  • created：初始化数据、属性、侦听器配置等，这个钩子内可以使用data
  • beforeMount：编译模板
  • mounted：完成渲染，一般会在mounted中执行一些异步请求、DOM操作（不建议）、定时器等。
• 更新相关

说明：更新是由于当前视图依赖的数据发生改变而触发的，所以一定不能在这个钩子内修改响应数据，否则就会进行一个死循环。

• beforeUpdate：依赖数据发生改变或使用￥forceUpdate进行强制更新触发
• updated：更新完成
• 销毁相关
  • beforeDestroy：移除已经添加的事件监听器，计时器等等
  • destroyed：销毁完成

  Vue.component('todo-list', {
    data() {
      return {
        message: "this is a component",
        show: true
      }
    },
    template: `
      <div>
      <button @click="hide">移除子组件</button>
      <div v-if="this.show">{{ this.message }}</div>
      </div>
    `,
    methods: {
      hide(){
        this.show = false;
      }
    },
    beforeCreate() {
      console.log("这是 beforeCreate")
    },
    created() {
      console.log("这是 created")
    },
    beforeMount() {
      console.log("这是 beforeMount")
    },
    mounted() {
      console.log('mounted')
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    },
    beforeDestroy() {
      console.log('beforeDestroy')
    },
    destroyed() {
      console.log('destroyed')
    }
  })

二、插值模板

Mustache 语法：双大括号获取数据，主要含有以下特点：

• 响应式数据: 当绑定的数据发生改变时，模板视图自动改变
• 支持表达式语法：可以在双大括号内使用单个表达式
• 不支持语句：像’var a = ‘hello’'或者含有复杂逻辑判断的语句不可以

三、内置指定

在vue中，指令是指含有 v- 的特殊属性，用于模板处理，内置指令主要分为以下几类：

1 - 基础类

• v-bind：属性绑定，缩写为 ：

<script>
   Vue.component('todo-list', {
    data() {
      return {
        message: "this is a component",
        show: true,
        active:'red'
      }
    },
    template: `
      <div>
      <div v-if="this.show">{{ this.message }}</div>
      <div>v-bind属性</div>
      <ul>
        <li v-bind:class="active">列表1</li>
        <li v-bind:[active]="show">列表2</li>
        <li :style="{'color':'yellow'}">列表三</li>
      </ul>
      </div>
    	`
 	})
</script>

// 模板渲染结果
<ul>
   <li class="red">列表1</li> 
	 <li red="true">列表2</li>
   <li style="color: yellow;">列表三</li>
</ul>

• v-on：事件绑定,缩写为@
  • 绑定事件：直接绑定函数名 / 绑定传参函数 / 传递当前事件对象$even / 动态绑定事件

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

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

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 等效于 -->
event.stopPropagation();

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 等效于 -->
event.preventDefault();

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

• 键盘修饰符:.enter / .tab / .delete / .space / .esc /. up / .down / .left / .right

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

• 系统修饰符：.ctrl / .alt / .shift / .meta
• 鼠标按钮修饰符:.left / .right / .middle

2 - 文本处理类

• v-text：用于更新文本内容

<span v-text="msg"></span>
<!--等效于-->
<span>{{msg}}</span>

• v-html：更新元素的innerHTML，即按照普通的html插入，不会被编译。慎用！！！防止 xss攻击

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

3 - 逻辑判断类

• v-if/v-else-if/v-else：控制元素的显示和隐藏，会销毁组件,是真正的条件渲染。含有较高的切换开销。
• 更详细的使用查看：https://cn.vuejs.org/v2/guide/conditional.html

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

• v-show：控制元素的显示与隐藏，只是修改元素的 display 属性，而不会销毁组件，含有较高的初始化开销

<h1 v-show="ok">Hello!</h1>

• v-for：循环渲染组件，配合 key 属性使用
• 更详细的使用查看：https://cn.vuejs.org/v2/guide/list.html

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

4 - 双向绑定类：

• v-model：双向绑定元素

5 - 组件相关

• v-slot：提供具名插槽或者接受prop插槽

6 - 其他不常用类：

• v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
• v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
• v-cloak：隐藏未编译的 Mustache 标签直到实例准备完毕。

四、绑定类名

1 - 对象语法

• 直接在模板中写对象

// 模板绑定
<div class="static"
  		v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

// 对应的data
data: {
  isActive: true,
  hasError: false
}

// 渲染结果
<div class="static active"></div>

• 将对象定义在data中

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

• 计算属性绑定

// 模板语法
<div v-bind:class="classObject"></div>

// 计算属性
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

2 - 数组语法

• 直接绑定数组

// 模板方式
<div v-bind:class="[activeClass, errorClass]"></div>

// 对应的data
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

// 渲染结果
<div class="active text-danger"></div>

• 根据条件切换绑定

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

• 在数组中使用对象绑定

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

3 - 组件绑定

在组件上绑定时，如果组件上已经有class属性，则动态绑定的class会和已有的class进行合并处理，而不是完全覆盖。

// 声明一个组件
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

// 使用上面的组件
<my-component class="baz boo"></my-component>

// 最后的渲染结果
<p class="foo bar baz boo">Hi</p>

五、绑定样式

1 - 对象绑定

• 内联样式绑定

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

// 响应数据
data: {
  activeColor: 'red',
  fontSize: 30
}

• 样式对象绑定

<div v-bind:style="styleObject"></div>

// 数据
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

2 - 数组绑定

<div v-bind:style="[baseStyles, overridingStyles]"></div>

// 响应数据
data:{
	baseStyles:{
		color:red
	},
	overridingStyles:{
		fontSize:"14px"
	}
}

六、基础总结