vue.js - VUE - 个人文章 - SegmentFault 思否

1. VUE的模板语法

(1) 引入Vue.js文件
(2) 创建Vue对象

el: 指定用vue来管理页面的哪个标签区域
data: 初始化数据(页面可以访问)

(3) 双向数据绑定： v-model
(4) 使用大括号表达式，向页面输出数据, 可以调用对象的方法. {{exp}}
(5) 理解vue的MVVM实现
M - Model 模型，数据对象(data)
V - View 视图，模板页面
VM - viewModel 视图模型(Vue的实例)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本使用</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <p>hello {{message}}</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: 'aaa'
        }
    })
</script>
</body>
</html>

效果展示：hello xxx可随着输入框内容的变化而变化

模板的理解:

* Vue.js 的核心是一个允许采用简洁的模板语法来 声明式 地将数据渲染进 DOM 的系统
* 动态的html页面
* 包含了一些js语法代码
* 大括号表达式
* 指令(以v-开头的自定义标签属性), Vue提供的特殊attribute

大括号表达式

* 语法： {{exp}}
* 功能： 向页面输出数据，可以调用对象的方法

举例1：大括号表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大括号表达式</title>
</head>
<body>
<div id="app">
    <h5>大括号表达式</h5>
    <p>{{message}}</p>
    <p>{{message.toUpperCase()}}</p><!--调对象的方法-->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: 'I will back '
        }
    })
</script>
</body>
</html>

结果：

举例2：
v-text 将内容理解为文本，即使内容是标签
v-html 将内容理解为标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大括号表达式</title>
</head>
<body>
<div id="app">
    <p v-text="message"></p><!--相当于textContent-->
    <p v-html="message"></p><!--相当于innerHTML-->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: '<a href="http:/www.baidu.com">I will back</a>'       
        }
    })
</script>
</body>
</html>

结果：

v-modle

在表单控件或者组件上创建双向绑定

举例：表单数据的自动收集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单数据的自动收集</title>
</head>
<body>
<div id="demo">
    <form action="xxx" @submit.prevent="handle">
        <span>用户名:</span>
        <input type="text" v-model="username"><br>
        <span>密码:</span>
        <input type="text" v-model="pwd"><br>

        <span>性别:</span>
        <input type="radio" id="female" value="女" v-model="sex">
        <label for="female">女</label>
        <input type="radio" id="male" value="男" v-model="sex">
        <label for="male">男</label><br>

        <span>爱好：</span>
        <input type="checkbox" id="basket" value='basket' v-model="likes">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value='foot' v-model="likes">
        <label for="foot">足球</label>
        <input type="checkbox" id="ping" value='pingpong' v-model="likes">
        <label for="ping">乒乓球</label><br>

        <span>城市：</span>
        <select v-model="cityId">
            <option value>未选择</option>
            //key必须是唯一的值
            <option :value="city.id" v-for='(city, index) in allCity' :key="city.id">{{city.name}}</option>
        </select><br>

        <span>介绍：</span>
        <textarea v-model="info"></textarea><br><br>

        <input type="submit" value="注册">
    </form>
</div>

<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            username: '',
            pwd: '',
            sex: '女',
            likes: [],
            allCity: [{id: 1, name: '北京'}, {id: 2, name: '上海'}, {id: 3, name: '广州'}],
            cityId: '',
            info: ''
        },
        methods: {
            handle() {
                console.log('用户名:' + this.username);
                console.log('密码:' + this.pwd);
                console.log('性别:' + this.sex);
                console.log('爱好:' + this.likes);
                console.log('城市:' + this.allCity[this.cityId-1].name);
                console.log('介绍:' + this.info);
            }

        }
    })
</script>
</body>
</html>

结果：

强制数据绑定

功能：指定变化的属性值
完整写法：
v-bind:xxx='yyy' //yyy会作为表达式来解析执行
简洁写法：
:xxx='yyy'
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制数据绑定</title>
</head>
<body>
<div id="app">
    <h5>强制数据绑定</h5>
    <img src="imgUrl">
    <img v-bind:src="imgUrl">
    <img :src="imgUrl"><!--简写形式-->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            imgUrl: 'img1.png'
        }
    })
</script>
</body>
</html>

结果：<img src="imgUrl">将属性值当作常量imgUrl, 未找到图片，则不显示。如果使用强制绑定，则src的属性值当作表达式解析

绑定事件监听

功能：绑定指定事件名的回调函数
完整写法:
v-on:事件名 = 'xxx'
简洁写法:
@事件名='xxx'

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件监听</title>
</head>
<body>
<div id="app">
    <h4>绑定事件监听</h4>
    <button v-on:click="test">点击</button>
    <button v-on:click="test1('abc')">点击1</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
        },
        methods: {
            test(){
                alert('hello')
            },
            test1(content){
                alert(content)
            }
        }
    })
</script>
</body>
</html>

结果：
使用methods属性，属性值为事件绑定的构造函数。根据需要，可传参，可不传参。

计算属性computed

计算属性的方法在什么时候执行：初始化显示或者相关的data属性数据发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="app">
    姓： <input type="text" placeholder="First Name" v-model="firstName"><br/>
    名： <input type="text" placeholder="Last Name" v-model="lastName"><br/>
    姓名(单向)： <input type="text" placeholder="Full Name" v-model="fullName">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B'
        },
        computed: {
            //fullName是计算属性中的一个方法，方法的返回值作为属性值
            //fullName方法在什么时候执行：初始化显示或者相关的data属性数据发生改变
            fullName: function () {
                return this.firstName + ' ' + this.lastName;
            }
        }
    })
</script>
</body>
</html>

结果：当姓或名发生改变时，姓名通过computed的计算方法也会随之变化。姓名框的改变，姓或名不会随之改变。

watch监视

1) 通过vm对象的$watch()或者watch配置来监视指定的属性
2) 当属性变化时，回调函数自动调用，在函数内部进行计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视</title>
</head>
<body>
<div id="app">
    姓： <input type="text" placeholder="First Name" v-model="firstName"><br/>
    名： <input type="text" placeholder="Last Name" v-model="lastName"><br/>
    姓名(单向)： <input type="text" placeholder="Full Name1" v-model="fullName1">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName1: 'A B'
        },
        watch: {//配置监视
            //监视firstName的变化
            firstName: function (value) {//value值为newValue
                this.fullName1 = value + ' ' + this.lastName;
            }
        },
    })

    vm.$watch('lastName',function (value) {//回调函数
        //更新fullName1
        this.fullName1 = this.firstName + ' ' + value;
    })
</script>
</body>
</html>

结果：同computed 的效果一样，姓名随着姓和名的变化而变化。

计算属性的get(获取)和set(监视，而非设置)

1)通过getter/setter实现对属性数据的显示和监视
2)计算属性存在缓存，多次读取只执行一次getter计算
getter: 属性的get方法
setter: 属性的set方法

注意理解回调函数：

回调函数的三个特点： 1.你定义的 2.你没有调用 3.但它最终执行了
要明白回调函数什么时候调，用来做什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="app">
    姓： <input type="text" placeholder="First Name" v-model="firstName"><br/>
    名： <input type="text" placeholder="Last Name" v-model="lastName"><br/>
    姓名(双向)： <input type="text" placeholder="Full Name" v-model="fullName2">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B'
        },
        computed: {
            fullName2: {
                //回调函数的三个特点： 1.你定义的 2.你没有调用 3.但它最终执行了
                //要明白回调函数什么时候调，用来做什么
                get() {//当需要读取当前属性值时回调；根据相关的数据，计算并返回当前属性的值
                    return this.firstName + ' ' + this.lastName;
                },
                set(value) {//监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
                    //value 就是fullName的最新属性值
                    const names = value.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
    })
</script>
</body>
</html>

结果：实现姓/名与姓名之间的双向改变

强制绑定Style

:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor / fontSize是data属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制绑定Style</title>
</head>
<body>
<div id="app">
    <p :style="{ color: activeColor, fontSize: fontSize + 'px' }">style</p>
    <button @click="update">更新</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            activeColor: 'red',
            fontSize: 20
        },
        methods: {
            update() {
                this.activeColor = 'blue';
                this.fontSize = 30;
            }
        }
    })
</script>
</body>
</html>

结果：

点击更新按钮：

条件渲染指令

v-if, v-else, 通过移除来隐藏显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染if</title>
</head>
<body>
<div id="app">
//if, else 哪个为真显示哪个
    <p v-if="ok">成功</p>
    <p v-else>失败</p>
    <button @click="ok=!ok">更新</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
           ok: false
        }
    })
</script>
</body>
</html>

结果：初始化的v-else 为真，所以显示v-else

点击按钮, v-else 为false, 被移除：

v-show:

通过display样式为none，来隐藏显示。
如果需要频繁切换 v-show 较好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染v-show</title>
</head>
<body>
<div id="app">
    <p v-show="ok">成功</p>
    <p v-show="!ok">失败</p>
    <button @click="ok=!ok">更新</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
           ok: false
        }
    })
</script>
</body>
</html>

结果：通过display样式为none，来隐藏显示

点击按钮：

VUE

1. VUE的模板语法

模板的理解:

大括号表达式

v-modle

强制数据绑定

绑定事件监听

计算属性computed

watch监视

计算属性的get(获取)和set(监视，而非设置)

强制绑定Style

条件渲染指令

v-if, v-else, 通过移除来隐藏显示

v-show:

shasha

引用和评论

day34 gulp

手写一个动态海洋和天空效果的vue hooks

原生electron起步-从零到一完成构建和打包

更强大、更灵活！ defineModel 重新定义双向绑定

7天撸完KTV点歌系统,含后台管理系统(完整版)

vue3使用百度地图

彻底搞懂面包屑，手把手封装一个 Vue3 面包屑导航组件