Vue.js再入门

• Vue2简单入门
• Vue.js再入门
• Vue.js使用vue-router构建单页应用
• Vue.js状态管理工具Vuex快速上手

Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。因此，我们既可以拿Vue当作普通的js模板引擎使用，也可以拿它开发的大型复杂单页应用。

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

Vue.js实例

Vue 实例，实则也就是 ViewModel（数据 + 函数），都是通过构造函数 Vue 创建

var vm = new Vue({
    name:'root',
    el:"#app",
    // 数据
    data: { a: 1 } / Function, // data类型根实例为Object，组件中为Function
    props:[]/{}, // 设置父组件传递给子组件的数据限制
    computed:{}, // 计算属性
    watch:{}, // 监控属性
    methods:{}, // 事件操作
    // 资源
    directives:{}, // 内部指令
    filters:{}, // 内部过滤器
    components:{}, // 内部组件
    // 生命周期：实例创建 => 编译挂载 => 组件更新 => 销毁
    beforeCreate(){
        console.log('beforeCreate ==> 实例创建')
    },
    created(){
        // 可以操作data, 但未生成DOM（未挂载）发起异步请求，初始化组件状态数据 data
        console.log('created ==> 实例创建完成，属性已绑定')
    },
    beforeMount(){
        console.log('beforeMount ==> 模板编译/挂载之前')
    },
    mounted(){
        // 已生成DOM到document中，可访问this.$el属性
        console.log('mounted ==> 模板编译/挂载之后')
    },
    beforeUpdate(){
        console.log('beforeUpdate ==> 组件更新之前')
    },
    updated(){
        // 操作DOM $('#box1')
        console.log('updated ==> 组件更新之后')
    },
    activated(){
        // 操作DOM $('#box1')
        console.log('activated ==> 组件被激活时（for keep-alive组件）')
    },
    deactivated(){
        console.log('deactivated ==> 组件被移除时（for keep-alive组件）')
    },
    beforeDestroy(){
        // 解除事件绑定，销毁非Vue组件实例等 如：this.$off('event1') select2.destory()
        console.log('beforeDestroy ==> 组件销毁之前')
    },
    destroyed(){
        console.log('destroyed ==> 组件销毁之后')
    }
})

模版语法

文本插值(v-text,v-html)

• 使用 {{ }} / <span v-text="msg"></span> 绑定数据
• {{ }} 纯文本绑定，单向，随vm变化而变化
• <span v-once>{{ msg }}</span> 纯文本，单次，不跟随vm变化
• <span v-html="msg"></span> 不转义html标签，绑定html

属性绑定(v-bind)

- 使用 `v-bind` 指令绑定数据至标签属性
<!-- 绑定一个属性 -->
![](imageSrc)
<!-- 缩写 -->
![](imageSrc)
<!-- with inline string concatenation -->
![]('/path/to/images/' + fileName)
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

事件绑定(v-on)

- 使用 `v-on` 指令绑定事件
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

表单绑定(v-model)

// 文本框
<input v-model="message" placeholder="edit me">
// 文本域（支持换行）
<textarea v-model="message" placeholder="add multiple lines"></textarea>
// 复选框
// 单选（返回 true/false ）
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
// 多选 （返回一个数组 ['jack', 'john']）
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
//单选框 （返回选中的值）
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
// 下拉框
// 单选 （返回选中的值）
<select v-model="selected">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
// 多选（返回一个数组 ['A','B']）
<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

列表渲染(v-for)

data: {
 items: [
    {message: 'Foo' },
    {message: 'Bar' }
  ]
  object: {
     firstName: 'John',
     lastName: 'Doe',
     age: 30
   }
}
//基本用法
<ul id="example-1">
    <li v-for="item in items">
        {{item.message}}
    </li>
</ul>
//为数组索引指定别名（或者用于对象的键）
<div v-for="(item, index) in items">
  {{index}} - {{item.message}}
</div>
<div v-for="(val, key) in object">
  {{ key }} : {{ val}}
</div>
<div v-for="(val, key, index) in object">
  {{key}} : {{val}} : {{index}}
</div>

条件判断(v-show,v-if,v-else,v-else-if)

**v-if**
//切换单个元素
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

//切换多个元素
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

//多条件判断
<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**
<h1 v-show="ok">Hello!</h1>
//不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。
//注意 v-show 不支持 <template> 语法。

指令

• 带有 v- 前缀的特殊属性
• 当其表达式的值改变时相应地将某些行为应用到 DOM 上
• v-bind/v-for/v-html/v-on/v-if/...
• v-bind 缩写 <a v-bind:href="url"></a><a :href="url"></a>
• v-on 缩写 <a v-on:click="doSomething"></a><a @click="doSomething"></a>

注册指令

//全局注册
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
    // 当绑定元素插入到 DOM 中。
    inserted: function (el) {
        // 聚焦元素
        el.focus()
    }
})
//局部注册
directives: {
    focus: {
        // 指令的定义---
    }
}
//使用
<input v-focus />

过滤器

• 使用 | 对原始值进行处理
• 用于属性绑定与 {{ }}
• {{ msg | capitalize }} <a :id="msgId | formatId"></a>
• 可以串联 {{ msg | filterA | filterB }}
• 可以接收参数 {{ msg | filterA(arg1, arg2) }}

注册过滤器

//全局注册
Vue.filters('capitalize',value=>{
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
})
//局部注册
filters: {
    capitalize: function (value, arg1) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
}
//使用
<span>{{msg | capitalize(arg1) }}