Vue学习笔记—基础语法(一)

一、Vue简介

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


二、MVVM模式简介(Model–View–ViewModel)

1、MVVM执行过程

首先由 View 接收到用户的交互请求,然后将请求转发给 ViewModelViewModel 操作 Model 进行数据更新,Model 更新完成数据之后,通知 ViewModel 数据发生变化,最后由 ViewModel 更新 View 数据。

2、MVMM模式执行过程图

MVMM模式执行过程图


三、使用Vue

1、用 Script 标签引入Vue.js

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

2、使用CDN引入

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

四、Vue的原理

1、Object.defineProperty(Vue 2.0)

<div id="app"></div>
<script>
    const obj = {}
    let v = 10
    Object.defineProperty(obj, 'x', {
        // get是再每次访问obj的x属性的时候就会执行,并且这个属性得到的值来自于get的返回值
        get () {
            return v
        },
        // 每次要修改obj的x属性,就会调用set
        set (newValue) {
            console.log('newValue:' + newValue)
            v = newValue
            // 每次set的时候都调用渲染DOM的方法,这样就实现了响应式
            setAppContent()
        }
    })
    // 这个方法专门负责渲染DOM
    const setAppContent = () => {
        document.querySelector('#app').innerHTML = obj.x
    }
    setAppContent()
</script>

2、Proxy(Vue 3.0 未发布)

<div id="app"></div>
<script>
    const setAppContent = () => {
        document.querySelector('#app').innerHTML = obj.x
    }
    // TODO:Proxy完成vue的响应式
    const obj = new Proxy({}, {
        get (obj, prop) {
            // 每次访问obj的属性的时候就会执行get,返回这个对象的属性值
            return obj[prop]
        },
        set (obj, prop, value) {
            // 每次修改obj的属性的时候就会执行set,在这里设置属性值
            console.log({ obj, prop, value })
            obj[prop] = value
            // 属性名为x的时候重新渲染app
            if (prop === 'x') setAppContent()
        }
    })
    // 默认先给一个obj的x属性
    obj.x = 20
    setAppContent()
</script>

五、Vue声明和渲染

1、例子:

<div id="app">
    <p>{{num}}</p>
    <!-- 双括号模板语法里可以写javascript表达式 -->
    <p>{{ num + 1 }}</p>
    <p>{{ num + 1 === 2 && '算对了' }}</p>
    <p>{{ num + 1 !== 2 && '算对了' }}</p>
    <p>{{ num + 1 === 3 ? '算对了' : '你真笨' }}</p>
    <p>{{ 'hello' + num }}</p>
    <!-- 插值表达式不会解析html -->
    <p>{{str}}</p>
</div>
<!-- 这里是vue实例根元素以外的元素,这里不能使用vue语法 -->
<!-- 一个html当中可以出现两个vue实例,但是这种做法不推荐 -->
<!-- <p>{{num}}</p> -->
<script>
    const app = new Vue({
        el: '#app',
        data: {
            num: 1,
            str: '<h1>title</h1>'
        }
    })
</script>

注意:

双括号模板语法里可以写 JavaScript 表达式
插值表达式不会解析 html
Vue 模板语法中想要输出文本,必须用引号把需要输出的文本引起来
一个 html 中可以出现两个Vue实列,但是这种方法不推荐
Vue 实例根元素以外的元素,不能使用 Vue 语法


六、V-html && V-text

1、例子:

<div id="app">
    <div>{{str}}</div>
    <!-- 指令:指令里要写js表达式 -->
    <!-- v-html会把html字符串渲染成标签 -->
    <div v-html="str"></div>
    <div v-html="'<b>strong</b>'"></div>
    <!-- 当指令和插值表达式冲突,指令生效 -->
    <div v-html="str">{{num}}</div>
    <!-- 会转义,不会渲染成标签 -->
    <div v-text="str"></div>
    <div v-text="str">{{num}}</div>
    <!-- 如果这两个指令冲突,后面的生效(但是一般不会遇到) -->
    <div v-text="num" v-html="str"></div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            num: 1,
            str: '<h1>title</h1>'
        }
    })
</script>

注意:

Vue 指令里要写 JavaScript 表达式
V-html 会把 html 字符串渲染成标签
当指令和插值表达式冲突的时候,指令生效
V-text 会转义,但是不会将内容渲染成标签
如果两个指令冲突,后面的指令会生效(一般不会遇到)


七、V-if && V-show

1、例子:

<div id="app">
    <!-- v-if和v-else必须用在相邻的兄弟元素 -->
    <p v-if="isShow > 0">这是一段文字</p>
    <p v-else-if="isShow < 0">这是第二段文字</p>
    <p v-else>这是第三段文字</p>
    <!-- v-if是通过是否渲染元素来决定显示,v-show通过display属性来决定的 -->
    <!-- 如果要频繁切换元素显示,用v-show -->
    <p v-show="isShow > 0">v-show案例</p>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isShow: 0
        }
    })
</script>

注意:

V-ifV-else 必须用在相邻的兄弟元素
V-if 是通过是否渲染元素来决定显示的,V-show 是通过 display 属性来决定是否显示的
如果要频繁切换元素的显示,使用 V-show


八、V-for

1、例子:

<div id="app">
    <!-- for in 或者for of 都可以 -->
    <!-- 可以遍历数组 -->
    <ul>
        <li v-for="(item, index) in arr">{{index}}: {{item}}</li>
    </ul>
    <!-- 可以遍历对象 -->
    <ul>
        <li v-for="(value, key) in obj">{{key}}: {{value}}</li>
    </ul>
    <!-- 可以遍历字符串 -->
    <ul>
        <li v-for="(char, index) in str">{{index}}: {{char}}</li>
    </ul>
    <!-- 可以遍历数字 -->
    <ul>
        <li v-for="n in 20">{{n}}</li>
    </ul>
    <ol>
        <li v-for="shop in list">
            <p v-for="(value, key) in shop">{{key}}: {{value}}</p>
        </li>
    </ol>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            // 数组响应式更新需要用到数组的api取修改,如果直接修改某一个元素DOM不会响应式更新
            arr: [1,3,4,5,6,7],
            obj: {
                x: 1,
                y: 2,
                z: 30
            },
            str: 'hello vue',
            list: [
                { id: 1, name: '小米', price: 2000},
                { id: 2, name: '华为', price: 6000},
                { id: 3, name: '苹果', price: 8000}
            ]
        }
    })
</script>

注意:

V-for 可以遍历数组、对象、字符串、数字
for-infor-of 都可以(两种方式都可以使用)


九、V-on($event)

1、例子:

<div id="app">
    <button v-on:click="isShow = !isShow">显示/隐藏弹框</button>
    <button v-on:click="handleBtnClick">显示/隐藏弹框</button>
    <button v-on:click="handleBtnClick2($event, 123)">显示/隐藏弹框</button>
    <p v-show="isShow">这是一个弹窗</p>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            data: 'sddsds'
        },
        methods: {
            handleBtnClick (e) {
                // 绑定事件的时候不加小括号,那么函数第一个形参默认就时事件对象,这个事件对象和原生的基本一致
                // 这种情况只能接收默认的事件对象参数
                console.log(e)
                // vue把他自带的这些选项,比如data,前面加了$,因此我们用的时候可以this.$data.isShow
                // this.$data.isShow = !this.$data.isShow

                // 当然,一般都直接this.isShow使用就可以了
                this.isShow = !this.isShow
            },
            handleBtnClick2 (e, num) {
                console.log(e)
                console.log(num)
                console.log(e.target) // 获取到原生对象
            }
        }
    })
    console.log(app)
</script>

注意:

v-on:click 可以简写成 @click (任意事件都可以使用 @click 来绑定)

使用 V-on 绑定事件的时候不加小括号,那么函数第一个形参默认就是事件对象,这个事件对象和原生的对象基本一致(第一个参数传 $event 是事件对象)

Vue 把自带的一些选项,比如 data ,前面加了$,因此我们用的时候就可以写成:this.$data.isShow

例:this.$data.isShow = !this.$data.isShow 等价于 this.isShow = !this.isShow

一般直接写 this.isShow 就可以了

使用 e.target 可以获取到原生对象


十:V-cloak

1、例子:

<head>
    <script src="./vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <!-- v-cloak属性是vue实例化之前存在,之后就自动消失 -->
    <!-- 咱们可以利用它让元素一开始的时候隐藏,有vue实例之后再显示 -->
    <div id="app" v-cloak>
        {{str}}
    </div>
    <script>
        setTimeout(() => {
            const app = new Vue({
                el: '#app',
                data: {
                    str: 'hello'
                }

            })
            }, 1000)
    </script>
</body>

注意:

V-cloak 属性是 Vue 实例化之前存在的,实例化完成之后就会自动消失
可以利用 V-cloak 让元素一开始隐藏,有 Vue 实例之后在显示
例如使用 V-cloak 可以制作页面渲染之前的动画


十一、V-bind

1、例子:

<div id="app">
    <!-- v-bind可以用来绑定任意属性,包括自定义属性 -->
    <!-- v-bind:src 可以简写为 :src -->
    <img :src="user.avatar" v-bind:alt="user.name" :title="user.name">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            user: {
                avatar: 'https://cn.vuejs.org/images/dcloud.gif',
                name: '张三'
            }
        }
    })
</script>

注意:

V-bind:src 可以简写成 :src
V-bind 可以用来绑定任意属性,包括自定义属性


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:Vue学习笔记—基础语法(一)

文章字数:2.5k

本文作者:Spicy boy

发布时间:2018-05-03, 17:52:21

最后更新:2021-03-08, 17:25:38

原始链接:http://www.spicyboy.cn/2018/05/03/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95-%E4%B8%80/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏