Vue.js

使用书籍：《Vue.js从入门到实践》作者：孙鑫

Vue 只关注视图层， 采用自底向上增量开发的设计。

MVVM 模式，顾名思义即 Model-View-ViewModel 模式

1. 第一个Vue程序{{ }}

    <div id="app">{{message}}</div><!-- 导入Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><script>var vm = new Vue({el: "#app", // 元素绑定谁data: {message: "Hello Vue!"}})</script>

2. Vue基本语法

2.1 v-bind

    <div id="app"><span v-bind:title="message">鼠标悬停可以显示内容</span></div><script src="../vue.js"></script><script>var vm = new Vue({el: "#app", // 元素绑定谁data: {message: "Hello Vue!"}})</script>

2.2 v-if, v-else

    <div id="app"><h1 v-if="ok">Yes</h1><h1 v-else>No</h1></div><script src="../vue.js"></script><script>var vm = new Vue({el: "#app", // 元素绑定谁data: {ok: true}})</script>

2.3 v-for

    <div id="app"><ul><li v-for="item in items">{{item.message}}</li></ul></div><script src="../vue.js"></script><script>var vm = new Vue({el: "#app",data: {items: [{message: '狂神说java'},{message: '狂神说前端'},{message: '狂神说vue'}]}})</script>

3. Vue 绑定事件

3.1 methods、v-on

<div id="app"><button v-on:click="sayHi">点这里</button></div><script src="../vue.js"></script><script>var vm = new Vue({el: "#app",data: {message: '狂神说java'},methods: {sayHi: function(){alert(this.message)}}})</script>

4. Vue 双向绑定

4.1 v-model

<div id="app">输入的文本：<input type="text" v-model="message" /> {{ message }}</div><script src="../vue.js"></script><script>var vm = new Vue({el: "#app",data: {message: '狂神说java'}})</script>

<div id="app"><input type="radio" name="sex" value="男" v-model="checked"/><input type="radio" name="sex" value="女" v-model="checked" /><p>选中了谁: {{checked}}</p></div><script src="../vue.js"></script><script>var vm = new Vue({el: "#app",data: {checked : ''}})</script>

<div id="app">下拉框：<select v-model="selected"><option value="" disabled>---请选择---</option><option value="A">A</option><option value="B">B</option><option value="C">C</option></select>{{selected}}</div><script src="../vue.js"></script><script>var vm = new Vue({el: "#app",data: {selected : ''}})</script>

5. Vue 组件

5.1 Component

<div id="app"><qinjiang v-for="item in items" v-bind:args="item"></qinjiang></div><script src="../vue.js"></script><script>//定义一个Vue组件ComponentVue.component("qinjiang", {props: ['args'],template: '<li>{{args}}</li>'})var vm = new Vue({el: "#app",data: {items: ["java","c++","linux"]}})</script>

6. Axios 异步通信

6.1 生命周期，mounted

demo.json

{"name":"name","url": "https://akfang.cn","isHero": true,"address": {"a": "a","b":"b","c":"c"},"lists": ["a","b","c"]
}

    <div id="app">{{info.name}}</div><script src="../vue.js"></script><script src="../axios.js"></script><script>var vm = new Vue({el: "#app",data(){return {info: {}}},mounted () {axios.get('../demo.json').then(({data}) => {this.info = data}).catch((err) => {console.log(err)});}})</script>

TIP: 解决闪烁问题

    <style>[v-cloak]{display: none;}</style>...<div id="app" v-cloak>...</div>

7. 计算属性 computed

**和methods的区别：**计算出来的结果保存到属性中，相当于缓存

可以重名，但是methods方法的优先级要高

<div id="app" v-cloak>currnetTime1: {{ currnetTime1()}} <br />currnetTime2: {{ currnetTime2}}</div><script src="../vue.js"></script><script src="../axios.js"></script><script>var vm = new Vue({el: "#app",data:{message: "hello, kuangshen",}, methods: {currnetTime1: function(){return Date.now() // 返回当前时间（一个时间戳）}},computed: {currnetTime2: function(){this.messagereturn Date.now() // 返回当前时间（一个时间戳）}}})</script>

8. 插槽 slot

<div id="app" v-cloak><todo><todo-title slot="todo-title" :title="title"></todo-title><todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items></todo></div><script src="../vue.js"></script><script src="../axios.js"></script><script>Vue.component("todo",{template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'})Vue.component("todo-title",{props: ['title'],template: '<div>{{title}}</div>'})Vue.component("todo-items",{props: ['item'],template: '<li>{{item}}</li>'})var vm = new Vue({el: "#app",data:{title: '请老师',todoItems: ['java','python','web']}})</script>

9. 自定义方法

很诡异，emmm 只能说很诡异

<div id="app" v-cloak><todo><todo-title slot="todo-title" :title="title"></todo-title><todo-items slot="todo-items" @remove="removeItems()" v-for="(item,index) in todoItems" :item="item" :index="index"></todo-items></todo></div><script src="../vue.js"></script><script src="../axios.js"></script><script>Vue.component("todo",{template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'})Vue.component("todo-title",{props: ['title'],template: '<div>{{title}}</div>'})Vue.component("todo-items",{props: ['item','index'],template: '<li>{{item}}<button @click="remove">删除</button></li>',methods: {remove: function (index) { this.$emit('remove',index)}}})var vm = new Vue({el: "#app",data:{title: '请老师',todoItems: ['java','python','web'],removeItems: function(index){this.todoItems.splice(index,1)}}})</script>