好几天没写东西了，发一下之前总结的笔记。。。

实例化vue

<div id="app"></div>
<sctipt>
new Vue({
    el:"#app",
    data:{},
    methods:{}
})
</sctipt>

标签：

el：element 需要获取的元素，一定是html中的跟容器元素

data：用于数据的存储

methods：用于存储各种方法

v-bind：绑定，例如 v-bind:value="test"

v-html：解析变量为html，例如

v-on:click：点击事件

v-on:dblclick：双击事件(同上)

v-on:mousemove：滑动事件

以上v-on:可以替换成@使用

@click.once：只触发一次

@click.prevent：阻止事件

v-on:keyup：键盘输入事件

v-on:keyup.enter：点击enter键触发

v-on:keyup.alt.enter：点击alt+enter键触发

v-text：解决插值表达式闪烁的问题

v-if & v-for

<div id="app">
<button v-on:click="error = !error"></button>
<p v-if="error">网络连接错误：404</p>
    
<ul>
    <li v-for="(user,index) in users">
    	{{index+1}}. {{user.name}} - {{user.age}}
    </li>
</ul>
    <template v-for="(user,index) in users">
        <div v-for="(val,key) in user">
            <p>{{key}} - {{val}}</p>
        </div>
    </template>
</div>
<script>
new Vue({
el:'#app',
data:{
	error:false，
    users:[
    {name:"Henry",age:28},
    {name:"Emily",age:25},
    {name:"Bucky",age:27}
    ]
}
});
</script>

双向绑定：v-model

也可以这样实现

<div id="app">
	<input ref="username" type="text" v-on:keyup="bind" />
	<span>{{name}}</span>
</div>
<script >
new Vue({
    el:"#app",
    data:{
    	name:""
    },
    methods:{
    	bind:function(){
    		this.name = this.$refs.username.value;
    	}
    }
})
</script>

methods与computed区别

<div id="app">
	<button v-on:click="a++">123</button>
	<button v-on:click="b++">321</button>
	<p>{{aa}}</p>
	<p>{{bb}}</p>
</div>
<script >
new Vue({
    el:"#app",
    data:{
    	a:0,
    	b:0
    },
    methods:{
    	/*aa:function(){
    		console.log("123");
    		return this.a;
    	},
    	bb:function(){
    		console.log("321");
    		return this.b;
    	}*/
    }
    computed:{
        aa:function(){
    		console.log("123");
    		return this.a;
    	},
    	bb:function(){
    		console.log("321");
    		return this.b;
    	}
    }
})
</script>

component模板

<script>
Vue.component("greeting",{
    template:'
    <p>{{name}}：大家好，给大家介绍一下我女朋友@关晓彤
    <button v-on:click="changeName">改名</button>
    </p>
    ',
    data:function(){
        return{
            name:"鹿晗"
        }
    },
    methods:{
        changeName:{
        	this.name = "Henry";
        }
    }
});
new Vue({
    el:"#app1"
});
new Vue({
    el:"#app2"
});
</script>
<div id="app1"></div>
<div id="app2"></div>

生命周期(钩子函数)

<script>
    new Vue({
        el:"#app",
        data:{},
        methods:{},
        beforeCreate:function(){
            alert("组件实例化之前执行的函数");  
        },
        created:function(){
            alert("组件实例化完毕，单页面还未显示");
        },
        beforeMount:function(){
            alert("组件挂在前，页面仍未展示，但虚拟DOM已配置");
        }，
        mounted:function(){
        	alert("组件挂在后，此方法执行后，页面显示");
        }，
        beforeUpdate:function(){
            alert("组件更新前，页面仍未更新，但虚拟DOM已配置");
        }，
        Update:function(){
            alert("组件更新，此方法执行后，页面显示");
        }，
        beforeDestory:function(){
            alert("组件销毁前");
        }，
        destoryed:function(){
            alert("组件销毁");
        }，
        
	})；
</script>

全局安装

#全局安装vue-cli
npm install --global vue-cli
#创建基于webpack模板项目（后面项目名自定义）
vue init webpack my-project
#安装依赖
cd my-project
npm install
npm run dev

简洁搭建脚手架使用：vue init webpack-simple my-project

路由

安装路由模块

npm install vue-roter --save-dev

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import HelloWorld from "./components/HelloWorld";
import Home from "./components/Home";

Vue.config.productionTip = false
Vue.use(VueRouter)
//配置路由
const router = new VueRouter({
  routes:[
    {path:"/",component:Home},
    {path:"/helloworld",component:HelloWorld}
  ],
  mode:"history" //去掉地址栏中的#
})

//全局注册组件
new Vue({
  router,//使用路由
  el: '#app',
  components: { App },
  template: '<App/>'
})

app.js

<template>
  <div id="app">、
      <router-link to="/">home</router-link>
      <router-link to="/helloworld">hello</router-link>
      <router-view></router-view>
  </div>
</template>

http请求

安装resource

npm install vue-resource --save-dev

main.js

import VueResource from 'vue-resource'//引入模块
Vue.use(VueResource)//使用

home.js

<template>
  <div class="home">
    <div v-for="user in users">{{user.name}}——{{user.email}}</div>
  </div>
</template>
<script>
  export default {
    name: 'Home',
    data () {
      return {
        users:""
      }
    },
    created(){
      this.$http.get("http://jsonplaceholder.typicode.com/users")
        .then((data)=>{
          console.log(data);
            this.users = data.body;
        })
    }
  }
</script>
<style scoped>
</style>

未完待续...

Q.E.D.