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

实例化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,例如 <p v-html="web"></p>

v-on:click:点击事件<button v-on:click="add()"></button>

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>

未完待续...

Last modification:July 29th, 2019 at 06:54 pm
如果觉得我的文章对你有用,请随意赞赏