vue

web

相关连接

官方文档

引入js

vue 下载

<script src="js/vue.js"></script>

js 调用

1. new Vue({}) 基本格式

new Vue({
    // 绑定一个节点
    el: '#id',
    // 设置数据
    data() {
        return {
            name: '李大爷',
            age: 18
        }
    }
})

2. methods 定义方法

new Vue({
    el: '#id',
    data() {
        return {}
    },
    // 设置方法
    methods: {
        method1() {},
        method2() {}
    }
})

3. watch 监听属性

• 监听 data 中的属性变化

<div id="app">
    <input v-model="input1" type="text">
    <input v-model="input2" type="text">
    <input v-model="input3" type="text">
</div>
<!-- js -->
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                input1: '',
                input2: '',
                input3: ''
            }
        },
        watch: {
            // input3 值改变时，同时修改 input1 和 input2 的值
            input3: function(val) {
                this.input1 = val;
                this.input2 = val;
            }
        }
    })
</script>

4. computed 计算属性

• 强化版 watch，无需定义 data，还能监听其他属性的变化

<div id="app">
    <input v-model="input1" type="text">
    <input v-model="input2" type="text">
    <input v-model="input3" type="text">
</div>
<!-- js -->
<script>
    new Vue({
        el: '#app',
        data() {
             return {
                input1: '',
                input2: ''
            }
        },
        computed: {
            // 默认调用的是 get 方法
            /*
            input3: function() {
                return this.input1 +' '+ this.input2;
            }
            */
            // 设置 set 方法
            // input3 被修改时，同时更新 input1 和 input2
            input3: {
                // get 中调用到的属性被修改时触发
                get: function() {
                    return this.input1 +' '+ this.input2;
                },
                // 自身被修改时触发 watch 一样的效果
                set: function(val) {
                    var names = val.split(' ');
                    this.input1 = names[0];
                    this.input2 = names[names.length - 1];
                }
            }
        }
    })
</script>

5. created() vue构造函数

6. mounted()

标签属性

1. {{}} 取值

<div id="app">
  <!-- 拿到 message 的值 -->
  <p>{{ message }}</p>
</div>
<!-- js -->
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: '李大爷'
            }
        }
    })
</script>

2. v-text 赋值文本

<div id="app">
    <!-- 拿到 message 的值 -->
    <div v-text="message"></div>
</div>
<!-- js -->
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: '李大爷'
            }
        }
    })
</script>

3. v-html 赋值标签

<div id="app">
    <!-- 拿到 message 的值 -->
    <div v-html="message"></div>
</div>
<!-- js -->
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: '<a href="https://cn.vuejs.org/">李大爷</a>'
            }
        }
    })
</script>

4. v-show 判断显示

<div id="app">
    <!-- v-if="boolear" 决定是否显示<p>标签 -->
    <p v-show="age < 20">
    {{ name }}
    </p>
</div>
<!-- js -->
<script>
new Vue({
  el: '#app',
  data() {
    return {
      name: '李大爷'
      age: 18
    }
  }
})
</script>

5. v-if 条件判断

<div id="app">
    <!-- v-if="boolear" 决定是否输出<p>标签 -->
    <p v-if="age < 18">
        {{ name }}
    </p>
    <!-- else if -->
    <p v-else-if="age == 18">
        {{ name }} 成年了
    </p>
    <!-- else -->
    <p v-else>
        不是 {{ name }}
    </p>
</div>
<!-- js -->
<script>
new Vue({
  el: '#app',
  data() {
    name: '李大爷'
    age: 18
  }
})
</script>

6. v-on | @ 事件

• event.target 可以获取事件触发的对象

事件修饰符

.stop：阻止事件冒泡
.prevent：提交事件不重载页面
.capture：添加事件侦听器时使用事件捕获模式
.self：只当事件在该元素本身（而不是子元素）触发时触发回调
.once：事件只能触发一次（2.1.4）
.passive：滚动行为将会立即触发（2.3.0）

<!-- v-on 格式：点击是调用 doSomething 方法 -->
<a id="app" v-on:click="doSomething"></a>
<!-- @ 格式：点击是调用 doSomething 方法 -->
<a id="app" @click="doSomething"></a>
<!-- js -->
<script>
new Vue({
    el: '#app',
    methods: {
        doSomething() {
            alert('李大爷');
        }
    }
})
</script>

7. v-for 循环

<div id="app">
  <ul>
    <!-- 方式一：只有 value -->
    <li v-for="member in family">
      {{ member.name }}
    </li>
    <!-- 方式二：完整格式(值,键,下标)-->
    <li v-for="(member,key,index) in family" :key="index">
      {{ index }}-{{ member.name }}
    </li>
    <!-- 方式三：按次数循环 -->
    <li v-for="num in 10">
      {{ num }}
    </li>
  </ul>
</div>
<!-- js -->
<script>
new Vue({
  el: '#app',
  data() {
    return {
      family: [
        { name: '李大爷' },
        { name: '胡大妈' }
      ]
    }
  }
})
</script>

8. v-model 数据绑定

• 绑定数据被修改时，所有被调用的地方都会动态修改

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<!-- js -->
<script>
new Vue({
  el: '#app',
  data() {
    return {
      message: ''
    }
  }
})
</script>

9. v-bind | :

其他骚操作
:checked="num == 100" 返回boolean值
:class="{ blue-btn:isBlue, red-btn:!isBlue }" 根据isBlue响应式属性判断
:class="classObj" classObj里可以存多个属性
:class="classObj[btn, red-btn]" 只拿其中两个属性的值
:class="classObj[btn, {blue-btn:isBlue}]" 嵌套{}
:class="classObj[btn, isBlue? blue-btn: red-btn]" 嵌套判断

<div id="app">
    <!-- 实际显示：<input type="hidden"> -->
    <!-- 方式一： -->
    <input v-bind:type="type">
    <!-- 方式二： -->
    <input :type="type">
</div>
<!-- js -->
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 通过响应式参数改变input的类型
                type: 'hidden'
            }
        }
    })
</script>

10. v-once 赋值一次，不动态修改

<div id="app">
    <!-- 不会修改 -->
    <input v-once v-model="name" type="text">
    <!-- 被包含的子节点属性也不会修改 -->
    <p v-once> {{ name }} </p>
    <!-- 会被修改 -->
    <input v-model="name" type="text">
    <input v-model="update" type="text">
</div>
<!-- js -->
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                name: '李大爷',
                update: ''
            }
        },
        watch: {
            // update 被修改时 同时修改 name
            update: function(val) {
                this.name = val;
            }
        }
    })
</script>

11. v-slot | # 插槽

vue部署和组件化

属性响应式更新

响应式更新： vue.data 中定义的属性更新时会对全局造成影响，动态改变所有被调用的地方，重写赋值。

• 对普通属性可以通过 "=" 直接修改
• 数组或对象中的属性需要使用方法修改（或者完全覆盖），"=" 不生效

1. js 原生方法

push(elem...) 末尾添加一个或多个元素
unshift(elem...) 开头添加一个或多个元素
pop() 删除并获取最后一个元素
shift() 删除并获取第一个元素
splice(index,rmLen,elem...) 插入或替换一个或多个元素
sort(func(p1,p2)) 排序
reverse() 颠倒顺序

2. vm.$set | Vue.set

• vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名

let vm = new Vue({
    el: '#app',
    data() {
        return {
            arr: ['李大爷','胡大妈']
            map: {
                name: '李大爷'
            }
        }
    }
});
// 代替 vm.arr[0] = '李大爷888';
vm.$set(vm.arr, 0, '李大爷888');
// 代替 vm.arr = ['李大爷888','胡大妈666'];
Vue.set(vm,'arr',['李大爷888','胡大妈666']);
// 添加响应式属性
// 注意：根属性无法添加和删除（根属性：arr、map）
vm.$set(vm.map, 'age', 18);