入门

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

模板

1. 文本
2. v-html用于输出 html 代码
3. v-bind
4. v-if/v-else
5. v-else-if
6. v-show
7. v-model指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<div id="app">	//html<p>{{ message }}</p>
</div><script>//JS
new Vue({el: '#app',data: {message: 'Hello Vue.js!'}
</script>

<div id="app"><div v-for="wo in ming">{{wo}}</div><div v-if="ba">{{ba}}</div><div>{{la}}</div><input v-model="la"><input type="button" value="消失" @click="ba=false"><input type="button" value="翻转" v-on:click="reverseMessage"><script>var you = new Vue({el: '#app',data: {ming: [123, 456, 789],ba:true,la:"woogw"},methods: {reverseMessage: function () {this.la = this.la.split('').reverse().join('')}}})</script>

简介

类似于Angular、React

• 单页面框架
• 模块化组件化开发模式

数据驱动代码

创建项目：

node：单独运行vue

npm install -g cnpm --registry=https://registry.npm.taobao.org//淘宝镜像，加快下载速度
cnpm install cnpm -g//升级cnpm
cnpm install vue//安装vue
npm install webpack -g//安装项目模块化打包管理工具的包
npm install -g @vue/cli//安装vue-cli
vue create 项目名（选择默认）
进入项目后再
npm run serve//运行项目//请求数据
cnpm install vue-resource --save//写入package.json中
cnpm install axios --save
cnpm install vue-routercd ../
cd 文件夹    

周期

beforeCreate

created

beforeMount

mounted

beforeUpdated

updated

beforeDestroy

destroyed

请求数据

1. vue-resource

   import re from 'vue-resource';
   var r=new re();this.$http.get(api).then((response)=>{},function(err){})
   

2. axios

3. fetch-jsonp

调用组件

<v-header></v-header>//templateexport default {//scriptcomponents: {"v-header": Header, //挂载组件},
};

组件间传值

父组件向子组件传值

<v-Header :title="title" :run="run"></v-Header>//执行run方法

props:['title'],//接收数据

父组件主动获得子组件值

<v-Header :title="title" :run="run"></v-Header>//子组件

this.$refs.header.属性//父组件

子组件主动获取父组件方法

this.$parent.属性//直接获取

非父子关系传值

//VueEvent.js即js配置
import Vue from 'vue';
var event=new Vue();
export default event;//A组件，把msg传给B
import VueEvent from '../model/VueEvent.js'
bus.$("id-Selected",this.msg)//B组件,用data接收data=msg,mounted为类定义接收的方法
mounted(){bus.$on('id-Selected',function(data){})}

路由

vue-router可以动态的改变所挂载的组件

//同上安装
//1js配置
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//2创建组件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
//import Foo from './Foo.vue'或者是
//3配置路由
const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }
];
//4实例化路由：创建router实例，然后传routes配置
const router = new VueRouter({routes // (缩写) 相当于 routes: routes
}),
//5挂载路由
const app = new Vue({router
}).$mount('#app')
//6根组件中放入
<router-view></router-view>

动态路由

path: '/bar/:aid', component: Bar
this.$route.params//获取动态路由的值this.$route.query//用get获取动态路由的值

路由模块化

import './assets/css/basic.scss';  //在跟js中引入css
import router from '../router.js' export default router//在本文件中

编程式导航

//字符串
this.$router.push('home')//对象
this.$router.push({ path: 'home' })//命名的路由(在path: '/foo', component: Foo后加name:'user')
this.$router.push({ name: 'user', params: { userId: '123' }})

前端框架

Mint UI

移动手机端框架

npm install mint-ui -simport MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)npm install babel-plugin-component -D

Element UI

PC端框架

Vuex

不同组件间数据共享、组件内数据持久化（用于大项目，小项目比较麻烦）（相似与Localstrage SessionStorage(小项目)）

npm install vuex -s

网址：vuex.vuejs.org

• state存放数据
• mutations改变state中数据
• getters数据发生改变时 会同时触发getters内的方法
• action类似于mutation、但是异步的

循环

<p v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}
</p>//对象名object、属性位置index（0~i）、属性名key、属性值value<script>
new Vue({el: '#app',data: {object: {name: '菜鸟教程',url: 'http://www.runoob.com',slogan: '学的不仅是技术，更是梦想！'}}
})
</script>

name : 菜鸟教程

url : http://www.runoob.com

slogan : 学的不仅是技术，更是梦想！

计算

• el
• data:存放数据
• methods:只有相关依赖发生改变时才会重新取值({{ reversedMessage }})
• computed（get/set）:在重新渲染的时候，函数总会重新调用执行{{ reversedMessage2() }}
• mounted接收数据(组件模板渲染之后触发的生命周期函数)
• components挂载组件名

监听

vm.$watch('counter', function(nval, oval) {alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
//vm为对象名，counter为属性名，watch为监听方法

组件

<child message='hello'></child>Vue.component('child', {//定义一个组件props: ['message'],//属性值template: '<span>{{ message }}</span>'//组件的内容
})

自定义指令

<div id="app"><p>页面载入时，input 元素自动获取焦点：</p><input v-focus>
</div><script>
Vue.directive('focus', {// 注册一个全局自定义指令 v-focusinserted: function (el) {// 当绑定元素插入到 DOM 中。el.focus()// 聚焦元素}
})
new Vue({// 创建根实例el: '#app'
})/*第二种形式*/
new Vue({el: '#app',directives: {focus: {// 注册一个局部的自定义指令 v-focusinserted: function (el) {// 指令的定义el.focus()// 聚焦元素}}}
})
</script>