前端_006_Vue2

本文全部参考Vue2

简介：Vue是一个数据响应式，MVVM模型的JS框架

官网：https://v2.cn.vuejs.org/v2/guide/

API：https://v2.cn.vuejs.org/v2/api/#methods

引用：

或者

示例：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

vue常用属性

属性名		参数范围	限制	注意点
el	绑定Vue实例挂载的DOM元素	String|Element	只在用 new 创建实例时生效	实例挂载之后，元素可以用 vm.$el 访问
data	数据	Object|Function	自定义组件实例时只接受Function参数，正常Vue实例一般都是不含状态行为的Object	实例创建之后，可以通过 vm.$data 访问原始数据对象
methods	函数	{ [key: string]: Function }	methods中不要使用箭头函数，this将不会指向Vue实例	可以直接通过 VM 实例访问这些方法
computed	计算属性	{ [key: string]: Function |{ get: Function, set: Function } }		计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。计算属性默认只有 getter
watch	监听回调	{ [key: string]: string|Function|Object|Array}		值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property

生命周期

ps:生命周期函数参数只能是Function,具体几个钩子函数参考官方手册，用时查

模版语法

#文本
{{message}}
{{message.split('')}} //支持JS表达式

v-once  无值  //表示该值只渲染一次

v-html 值为String

v-bind:[attribute]  缩写 :[attribute] //支持属性值中使用JS表达式

v-if 值为String //控制是否移除该元素
v-show 值为String //控制是否展示，DOM元素一直在

v-on:[Event]   缩写 @[event]  //绑定事件   支持属性值中使用JS表达式

v-for 值为String  "item in items" "(value,name) in object" //可以遍历数组或者对象里属性

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

v-model,v-for,v-bind组合使用
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

注意：v-on:[event] 事件处理支持事件修饰符

键盘修饰符

系统修饰符

自定义组件

ps：Vue自定义组件只能在Vue实例里面使用

组件中常用属性

属性名	作用	参数范围	限制	注意
data		Object|Function
props	设定自定义组件元素属性	Array | Object		可以指定该元素属性限制条件
template	模板，会替换原有的DOM元素	String		板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。template值字符串里可以使用Vue的数据绑定{{param}}
	组件属性，可以局部注册	Object

全局注册

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法，提供验证
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

单文件组件

.vue后缀文件，基本就是Vue文件里 template,script,style 一个网页需要的元素放在一个文件里，不同的设计思路

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function() {
    return {
      greeting: "Hello"
    };
  }
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

路由

引入：https://unpkg.com/vue-router@3/dist/vue-router.js

使用官方vue-router，使用Vue-router3系列版本适配Vue2

一句话介绍客户端路由：输入不同的url，页面渲染不同的内容。

在Vue中，就是不同的url可以渲染不同的Vue组件

具体细节参考官方链接：https://v3.router.vuejs.org/zh/

一般掌握常规路由用法基本的项目完全够用