Vue总结

Vue

Vue 的使用

script中

1、创建vue实例与页面标签进行绑定，该实例就可以控制该标签机内部所有标签
    new Vue({
        // 2、挂载点：与页面标签绑定的关键，具有唯一性
        el: '#app',
        // 3、vue中要使用的数据
        data: {
            msg: 'h1标签',
            info: '',
            message: ''
        },
        // 4、methods控制所有事件
        methods: {
            action: function () {
                this.msg = 'h1被点击了';
                this.info = 'h1被点击了';
                this.message = 'h1被点击了';
            }
        }
    })

body中

<div id="app">
        <h1 @click="action">{{ msg }}</h1>
        <h2>{{ info }}</h2>
        <h2>{{ message }}</h2>
    </div>

Vue页面取消闪烁(v-cloak)

标签中

<div id="app" v-cloak>

css中属性选择器

[v-cloak] {
            display: none;
        }

插入值表达式

<!--1、插值表达式：在内部直接写变量或变量表达式-->
        <p>{{ msg }}</p>
        <p>{{ (num + 1 - 3) / 2 }}</p>

三个插入文本指令

 <!--2、v-text v-html v-once 三个文本指令 -->
        <!--v-text:纯文本-->
        <p v-text="msg"></p>
        <!--v-html:可以解析标签-->
        <p v-html="'<b>加粗文本</b>'"></p>
        <p v-html="htmlMSG" @click="changeMsg"></p>
        <!--v-once:插值表达式渲染文本，once来限制文本不可修改-->
        <!--插值表达式中一个变量被限制，整个结果都被限制-->
        <p v-once="htmlMSG">{{ htmlMSG + msg }}</p>

点击事件v-on:click/@click

鼠标事件的对象：直接写函数名，默认将鼠标事件对象传入、
鼠标事件的对象：一旦添加(),就必须手动传参，$event就代表鼠标事件对象
$event:自动传入ev事件

<!-- v-on指令: 1）明确事件名 2）明确事件函数  v-on:事件名="事件函数"  -->

        <!--1、基础的事件绑定-->
        <p v-on:click="clickAction">单击</p>
        <p v-on:dblclick="dblclickAction">双击</p>

        <!--2、绑定事件并传参-->
        <ul>
            <li v-on:click="liAction(0)">{{ li1 }}</li>
            <li v-on:click="liAction(1)">222</li>
            <li v-on:click="liAction(2)">333</li>
        </ul>

        <!--3、传递事件对象-->
        <p v-on:click="sysAction1">不传自定义参数</p>
        <p v-on:click="sysAction2(888, $event)">传自定义参数</p>

        <!--4、v-on: 可以简写为 @ -->
        <p @click="clickAction">单击</p>

属性事件v-bind

<!-- v-bind属性指令 :属性名="属性变量"，v-bind: 可以简写为: -->
        <!--eg: v-bind:class='myClass' | v-bind:style='myStyle' | v-bind:aaa='myAAA' -->
        <div class="box" v-bind:style="myStyle" @click="changeColor('pink')"></div>

        <!--1、操作单个样式：w变量的值就是为属性宽提供数据的-->
        <div class="box" v-bind:style="{'width': w}" @click="changeWidth"></div>

        <!--2、操作多个样式: more_style是一个对象变量，可以赋值多个key:value样式-->
        <div class="box" v-bind:style="more_style" @click="changeStyle"></div>

        <!--3、v-bind: 可以简写为 :，可以绑定所有系统和自定义属性，属性一旦绑定，后方就是变量 -->
        <div :aaa="AAA">简写v-bind</div>

        <!--4、操作单个类名-->
        <!--直接赋值：c1就是变量，变量的值就是类名-->
        <div :class="c1" @click="changeClass"></div>
        <!--布尔切换：该div有一个kiss类名，kiss_able的true或false决定kiss是否生效-->
        <div :class="{kiss: kiss_able}"></div>

        <!--5、操作多个类名: [变量1, ..., 变量n] 每个变量的值都是该标签的类名 -->
        <div :class="[x, y, {z: is_z}]"></div>

表单事件v-model

<!-- v-model 表单指令 v-model="变量"  变量给value属性提供值 -->

        <!--1、数据的双向绑定-->
        <input type="text" v-model="val">
        <input type="text" v-model="val">
        <p>{{ val }}</p>

        <form action="">
            <!--2、普通输入框: 直接绑定变量即可 -->
            <input type="password" v-model="val">

            <!--3、单选框-->
            <!--radio_val的值是多个单选框中一个的value值，代表该单选框默认选中-->
            <p>
                <label for="male">男</label>
                <input id="male" type="radio" value="male" v-model="radio_val" name="sex">
                <label for="female">女</label>
                <input id="female" type="radio" value="female" v-model="radio_val" name="sex">
                <button @click="alertValue">单选框提交给后台的value</button>
                <span>{{ radio_val + '被选中' }}</span>
            </p>

            <!--4、独立使用的复选框 -->
            <!--sure_val的值为true|false，决定该单个复选框是否选中-->
            <p>
                <input type="checkbox" name="sure" value="同意" v-model="sure_val">
                <span>{{ sure_val }}</span>
            </p>
            request.GET.get('sure', None)
            <!--5、复选框-->
            <!--hobby_val的值是数组，里面用来存放复选框所有选项的值，值存在代表该选框选中-->
            <p>
                男<input type="checkbox" value="male" name="hobby" v-model="hobby_val">
                女<input type="checkbox" value="female" name="hobby" v-model="hobby_val">
                哇塞<input type="checkbox" value="?" name="hobby" v-model="hobby_val">
                <span>{{ hobby_val }}</span>
            </p>

            <p>
                <input type="submit">
            </p>
        </form>

条件指令

v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示

<!-- v-if | v-show 条件指令: v-if="变量" | v-show="变量" -->

       # <!--1、v-if | v-show比较：两者绑定的变量值都是 true|false-->
        <p>
            <button @click="toggleAction(true)">显示</button>
            <button @click="toggleAction(false)">隐藏</button>
        </p>
        #<!--v-if在隐藏时，不被渲染 | v-show在隐藏时，采用display: none存在-->
        <div class="box b1" v-if="is_show"></div>
        <div class="box b2" v-show="is_show"></div>

        <!--2、v-if、v-else-if、v-else 分支家族 -->
        <p>
            <button @click="toggleShow('red')">红</button>
            <button @click="toggleShow('blue')">蓝</button>
            <button @click="toggleShow('green')">绿</button>
        </p>
        <div class="box r" v-if="color == 'red'"></div>
        <div class="box b" v-else-if="color == 'blue'"></div>
        <div class="box g" v-else></div>

循环指令v-for

<!-- v-for 循环指令: v-for="ele in 容器变量" -->

        <!--1、array的循环-->
        <ul>
            <li v-for="s in arr">{{ s }}</li>
        </ul>
        <hr>
        <!--key属性是vue的属性，表示为改标签在内存中建立缓存的依据-->
        <ul>
            <li v-for="(s, i) in arr" :key="s" b="b">第{{ i }}个：{{ s }}</li>
        </ul>
        <hr>
        <!--2、对象的循环-->
        <ul>
            <li v-for="v in person">{{ v }}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(v, k) in person">{{ k }}:{{ v }}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(v, k, i) in person">{{ k }}:{{ v }}:{{ i }}</li>
        </ul>
        <hr>

        <!--name: * | sex:*-->
        <!--name: * | sex:*-->
        <!--name: * | sex:*-->

        <p v-for="stu in stus">
            <span v-for="(v, k, i) in stu">
                <b v-if="i != 0"> | </b>
                <b>{{ k }}:{{ v }}</b>
            </span>
        </p>

    </div>
</body>
<script src="js/vue.js"></script>
    new Vue({
        el: '#app',
        data: {
            arr: ['aaa', 'bbb', 'ccc'],
            person: {
                'name': 'Bob',
                'age': 18,
                'sex': '男'
            },
            stus: [
                {
                    'name': 'Alex',
                    'sex': '哇塞'
                },
                {
                    'name': 'Egon',
                    'sex': '哇哦'
                },
                {
                    'name': 'Jason',
                    'sex': '我去'
                }
            ]
        }
    })

tudulist留言案例

html

<input type="text" v-model="msg_val">
        <button @click="sendMsg">留言</button>

        <ul>
            <li v-for="(msg, i) in msgs" @click="deleteMsg(i)">{{ msg }}</li>
        </ul>

script

new Vue({
        el: '#app',
        data: {
            // msgs: ['第一条留言', '第二条留言'],
            msgs: localStorage.msgs ? localStorage.msgs.split(',') : [],
            msg_val: '',
        },
        methods: {
            sendMsg () {
                // 1）数据为空直接结束
                if (!this.msg_val) return;

                // 2）数据添加到留言数组中
                // this.msgs.push(this.msg_val);  // 尾增
                this.msgs.unshift(this.msg_val);  // 首增

                // 数据同步到前台数据库
                localStorage.msgs = this.msgs;

                // 3）清空输入框
                this.msg_val = '';
            },
            deleteMsg (index) {
                // console.log(index);
                this.msgs.splice(index, 1);
                // 数据同步到前台数据库
                localStorage.msgs = this.msgs;
            }
        }
    })

浏览器存储数据

// window.localStorage  // 永久存储仓库
    // window.sessionStorage  // 临时存储仓库

    // 存，存完注释
    // localStorage['name'] = 'Owen'
    // 取
    console.log(localStorage.name);

    // 存，存完注释
    // sessionStorage.age = 18;
    // 取
    console.log(['age']);

    // localStorage.msgs = []

    // 清空
    localStorage.clear();
    localStorage.clear();

    // localStorage.arr = [1, 2, 3];
    // localStorage.obj = {'1': 1};

符合冲突delimiters

<p>{{ msg }}</p>
<p>{[ msg ]}</p>
<p>${ msg }</p>
new Vue({
        el: '#app',
        data: {
            msg: '信息'
        },
        // delimiters: ['{[', ']}'],
        delimiters: ['${', '}'],
    })

计算属性computed

computed: {
            val_fn () {
                // this.a_val;
                // this.b_val;
                // this.c_val;
                console.log('该方法被调用了');
                return this.a_val + this.b_val + this.c_val;
            }
        }

watch属性监控

// watch内部书写方法 - 管理 监听绑定的属性(提前要存在) 的方法
        // 1）方法名 被监听的变量名(属性)
        // 2) 在方法名被渲染后，方法名代表的属性值改变，绑定的方法就会被调用
        // 3）watch用来解决多个变量值依赖一个变量值
        watch: {
            full_name () {
                console.log('被调用了');
                // full_name变量值改变，要完成的任何逻辑都可以书写在此方法中
                let name = this.full_name.split(' ');
                this.last_name = name[0];
                this.first_name = name[1];
            }
        }