2019-5-29

中文官网

https://cn.vuejs.org/

渐进式

限制少，易于入手

在使用vue.js使用同时可以使用其他框架

起步

引用步骤

CDN 或者 下载 或者 CLI脚手架

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

or

<script src="https://unpkg.com/vue"></script>

实例化Vue对象

new Vue({
    el: "#vue-app",
    data:{
        name: "BobH",
    }
});
//el: element html里面的根容器元素
//data: 存储数据

<div id="vue-app">
    <h1> {{ name }}</h1>
</div>

数据和方法

new Vue({
    el: "#vue-app",
    data:{
        name: "BobH",
    },
    methods:{
        greet: function(str){
            return str;
        },
        getName: function(){
            return this.name;
        },
    }
});
//methods: 所有方法存在这个对象里面

<div id="vue-app">
    <h1> {{ getName() }} </h1>
    <h1> {{ greet('fuck you') }} </h1>
</div>

属性绑定

new Vue({
    el: "#vue-app",
    data:{
        name: "BobH",
        website: "https://dev.kuang.cf/",
        htmlCont: "<h1>test!</h1>",
    },
    methods:{
        greet: function(str){
            return str;
        },
        getName: function(){
            return this.name;
        },
    }
});

<div id="vue-app">
    <h1> {{ getName() }} </h1>
    <h1> {{ greet('fuck you') }} </h1>
    <a v-bind:href="website">邝网</a>
    <input type="text" v-bind:value="name"/>
    <p v-html="htmlCont"></p>
</div>

2019-5-31

事件绑定

<div id="vue-app">
    <h1> Event </h1>
    <button v-on:click="add"> 增加一岁 </button>
    <button v-on:click="subtract"> 减少一岁 </button>
    <button v-on:dblclick="dblfunc"> 双击事件 </button>
    <p> My age is {{age}} </p>
    <div v-on:mousemove="updateXY">{{x}},{{y}}</div>
</div>

还可以使用更简洁方法@绑定事件

<div id="vue-app">
    <h1> Event </h1>
    <button @click="add"> 增加一岁 </button>
    <button @click="subtract"> 减少一岁 </button>
    <button @dblclick="dblfunc"> 双击事件 </button>
    <p> My age is {{age}} </p>
    <div v-on:mousemove="updateXY">{{x}},{{y}}</div>
</div>

new Vue({
    el: "#vue-app",
    data:{
        age: 18,
        x: 0,
        y: 0,
    },
    methods:{
        add: function(){
            this.age++;
        },
        subtract: function(){
            this.age--;
        },
        dblfunc: function(){
            alert("double click");
        },
        updateXY: function(event){
            //console.log(event);
            this.x = event.screenX;
            this.y = event.screenY;
        }
    }
});

事件修饰符

纯js阻止事件传递

<div id="vue-app">
    <h1> Event </h1>
    <button v-on:click="add"> 增加一岁 </button>
    <button v-on:click="subtract"> 减少一岁 </button>
    <button v-on:dblclick="dblfunc"> 双击事件 </button>
    <p> My age is {{age}} </p>
    <div v-on:mousemove="updateXY">{{x}},{{y}}</div>
</div>

new Vue({
    el: "#vue-app",
    data:{
        age: 18,
        x: 0,
        y: 0,
    },
    methods:{
        add: function(){
            this.age++;
        },
        subtract: function(){
            this.age--;
        },
        dblfunc: function(){
            alert("double click");
        },
        updateXY: function(event){
            //console.log(event);
            this.x = event.screenX;
            this.y = event.screenY;
        },
        stopMoving: function(event){
            event.stopPropagation();
        },
    }
});

修饰符方法

<div id="vue-app">
    <h1>我的年龄: {{ age }}</h1>
    <button v-on:dblclick="addAge">增加年龄</button>
    <button v-on:dblclick="jianAge">减少年龄</button>
    <p v-on:mousemove="updateMousePos">x:{{x}} , y:{{y}}
        <span v-on:mousemove.stop="">stop</span>
    </p>
</div>

只准执行一次的修饰

<button @dblclick.once="addAge">增加年龄</button>

对a标签附加click事件举例

<a @click="urlEvent" href="https://www.baidu.com/">click me</a>

methods:{
    ...
    urlEvent: function(){
        alert("跳转!");
    },
},

或者拒绝

<a @click.prevent="urlEvent" href="https://www.baidu.com/">click me</a>

键盘事件

<div id="vue-app">
    <h1>键盘输入</h1>
    <label>姓名:</label>
    <input @keyup.enter.alt="logName" type="text">
    </br>
    <label>年龄:</label>
    <input type="text">
</div>

var Vueins = new Vue({
    el: "#vue-app",
    data:{

    },
    methods:{
        logName: function(event){
            console.log(event);
        },
    },
});

2019-6-1

双向数据绑定

一定和 input select textarea 相关

ref属性使用

<div id="vue-app">
    <h1> 双向数据绑定 </h1>
    <lable>name:</lable>
    <input ref="name" type="text" @keyup="handler">
    <lable>age:</lable>
    <input ref="age" type="text" @keyup="handler">
</div>

var VueIns = new Vue({
    el: "#vue-app",
    data:{
        name:"",
        age:"",
    },
    methods:{
        handler: function(event){
            this.name = this.$refs.name.value;
            this.age = this.$refs.age.value;
        },
    },
});

或者使用v-model属性绑定

<div id="vue-app">
    <h1> 双向数据绑定 </h1>
    <lable>name:</lable>
    <input ref="name" type="text" v-model="name">
    <span> {{name}}</span>
    </br>
    <lable>age:</lable>
    <input ref="age" type="text" v-model="age">
    <span> {{age}}</span>
</div>

计算属性

名称 Computed

目的 性能优化

<div id="vue-app">
    <h1> 计算属性 </h1>
    <button @click="a++">add A</button>
    <button @click="b++">add B</button>
    <p>A: {{a}}</p>
    <p>B: {{b}}</p>
    <p>A + age: {{addA}}</p>
    <p>B + age: {{addB}}</p>
</div>

var VueIns = new Vue({
    el: "#vue-app",
    data:{
        a:0,
        b:0,
        age:30,
    },
    methods:{
        /*
        addA: function(){
            return this.a + this.age;
        },
        addB: function(){
            return this.b + this.age;
        },
        */
    },
    computed: {
        addA: function(){
            return this.a + this.age;
        },
        addB: function(){
            return this.b + this.age;
        },
    },
});

动态绑定css样式

v-bind:class

span{
    background: red;
    display: inline-block;
    padding: 10px;
    color: #fff;
    margin: 10px 0;
}
.changeColor span{
    background: green;
}
.changeLength span::after{
    content: "length";
    margin-left: 10px;
}

<div id="vue-app">
    <h1> css 动态绑定 </h1>
    <h2>实例1</h2>
    <div @click="changeColor = !changeColor;" v-bind:class="{changeColor:changeColor}">
        <span>BobH</span>
    </div>
    <h2>实例2</h2>
    <button @click="changeColor = !changeColor;">change color</button>
    <button @click="changeLength = !changeLength;">change length</button>
    <div v-bind:class="compClasses">
        <span>BobH</span>
    </div>
</div>

var VueIns = new Vue({
    el: "#vue-app",
    data:{
        changeColor: false,
        changeLength: false,
    },
    methods:{

    },
    computed: {
        compClasses: function(){
            return {
                changeColor: this.changeColor,
                changeLength: this.changeLength,
            };
        },
    },
});

v-if 指令

v-if 与 v-show 区别

v-if 在消失时在dom中不渲染
v-show 在dom中一直存在，只改变display属性

<div id="vue-app">
    <h1> v-if 条件 </h1>
    <button @click="error = !error;">Toggle Error</button>
    <button @click="success = !success;">Toggle Success</button>
    <p v-if="error">网络连接错误： 404</p>
    <p v-else-if="success">网络连接成功: 200</p>
    <p v-show="error">1网络连接错误： 404</p>
    <p v-show="success">1网络连接成功: 200</p>
</div>

var VueIns = new Vue({
    el: "#vue-app",
    data:{
        error: false,
        success: false,
    },
    methods:{

    },
    computed: {

    },
});

v-for 指令

<div id="vue-app">
    <h1> v-for 循环 </h1>
    <!-- 数组下标形式 -->
    <!--{{words[0]}}
    {{words[1]}}
    {{words[2]}}
    {{words[3]}}-->
    <ul>
        <li v-for="word in words">
            {{word}}
        </li>
    </ul>
    <ul>
        <li v-for="(user,index) in users">
            {{user.name}} - {{user.age}} -> id: {{index}}
        </li>
    </ul>

    <!--使用template优化-->
    <template v-for="(user,index) in users">
        <h3>{{index}} . {{user.name}}</h3>
        <p>Age - {{user.age}}</p>
    </template>
    <!--枚举对象键值-->
    <template v-for="(user,index) in users">
        <div v-for="(val,key) in user">
            val: {{val}} - key: {{key}}
        </div>
    </template>
</div>

var VueIns = new Vue({
    el: "#vue-app",
    data:{
        words:["BobH","Yucai","LiuQingwen","OJ"],
        users:[
            {name:"BobH",age:16},
            {name:"LiuQingwen",age:90},
            {name:"Wangjian",age:3},
        ],
    },
    methods:{

    },
    computed: {

    },
});