Vue3 | 基本特性概念与语法的应用与案例

完整原文地址见简书https://www.jianshu.com/p/4b57257de535

更多完整Vue笔记目录敬请见《前端 Web 笔记汇总目录（Updating）》

Vue3 特性升级

体积更小、速度更快
解决遗留问题
相对于原生的JS编程，Vue3是面向数据编程，直接操作数据，
少了通过组件id 去get到组件完了set值等面向DOM的编程，提高开发效率；

本文主要涉及的语法糖与知识点：

文章内容将围绕这些语法糖与知识点展开 demo实现讲解和相关阐述；

-Vue.createApp()，创建Vue实例，开始使用Vue；

-.mount()指定在哪个组件上使用Vue；
注意没有被mount()指定的组件是不会生效的！

-变量的使用，用双花括号{{}}表示【也叫插值表达式】，
如template:'<div>{{content}}</div>'

-template:vue的重点，
意思是在mount()指定的组件中，展示template的内容，
其中的组件可以与data()中的数据相互绑定；

-data(){ return{ ***:*** (, ***:***, ... ) } }：vue的重点，
用于存放数据，可以为template提供数据供其绑定，
配合template完成数据UI双向绑定；

【！！！数据UI 双向绑定！！！】
组件UI绑定数据的值，
数据发生改动，则UI随之发生变化！！！
开发者可以通过js脚本去控制数据变化从而使得相关UI组件发生变化；
（学过安卓的同学可能发现这有点类似于安卓的Adapter设计模式 / MVVM 设计模式）

-mounted()方法，当页面加载完成的时候会调用，其实它就是一个 Vue生命周期回调；

-template的冒号之后，可以用反引号 “ ` ” 来囊括表述更多的组件；

-v-on:是Vue的一个指令，表示要绑定事件；
v-on:click表示要绑定点击事件；

-methods对象中可以用来编写Vue架构中使用到自定义函数/方法；

-v-if：标签配置了v-if指令的话，
则标签（对应UI组件）的显示与否由v-if指令所指定的值决定；

-v-for：标签配置了v-for指令，
则标签（对应UI组件）可以迭代遍历其绑定的数据List，
遍历的内容（index、item等）可以由v-for指定；

-v-model：标签配置了v-model指令，
则标签（对应UI组件）的内容（如input标签对应的输入框组件的内容），
会跟v-model指定的数据变量/字段（一般这个数据字段存放在data()特性函数中）的值双向绑定！！！；

-v-bind：指定标签组件的某个属性（如例子中挂载的title属性）跟数据绑定；
注意跟v-model区分开来，
v-model指定的是标签组件的内容跟数据绑定；

另外注意，
v-bind的冒号后接着的是v-bind 修饰的组件的属性，
接着等号后面接着的是组件属性对应要绑定的数据字段名，
如<my-todoItem v-for="item of hehedaList" v-bind:content="item"/>中，
content为组件my-todoItem的属性，content这个属性绑定的数据字段为item;

-【拆组件设计思想】，将页面的某一个部分 作为独立的模块 聚合出来；
避免把整个网站的内容编写全部放在一个文件中；

-注意调用顺序！！！
必须先实例化Vue()应用实例，
然后再component()注册组件，
然后再mount()挂载入；

-【使用component()注册组件，组件化的组件模块】，
注册之后可以直接作为一个标签组件来使用：
如heheApp.component('my-todoItem', {...});是注册组件的代码，
一参为组件名字，二参可以编写组件的UI和数据等描述，
之后在Vue.createApp()的template中，
就可以像这样，把我们自己注册的组件的组件名，
像DOM标签一样去使用：<ul><my-todoItem .../></ul>

-【v-bind与props】
用v-bind给组件绑定的数据字段（如下面demo中的content），
会在注册该组件的代码模块（heheApp.component()）中的props字段中被接收到；

Demo：HelloWorld

本demo涉及的语法或知识：

-Vue.createApp()，创建Vue实例，开始使用Vue；

-.mount()指定在哪个组件上使用Vue；
注意没有被mount()指定的组件是不会生效的！

开始步骤

下载好 VSCode
随便创建一个新的文件夹：

把文件夹拖到VSCode打开；

创建一个html文件：

输入!然后敲一下Tab键，自动生成H5代码架构：

接着在head标签中，
加入一行<script src="https://unpkg.com/vue@next"></script>，
就可以直接引入Vue库，使用Vue编写代码了：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

键入例程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
</body>
<script>
    //使用Vue创建一个实例连接到root_div组件，注入内容
    Vue.createApp({
        template:'<div>Hello World! heheheheheheda</div>'
    }).mount('#root_div');
</script>
</html>

保存键入的例程之后，在文件夹处双击html文件：

成功显示内容：

&举一反三：
再来一个例程，再度理解Vue.createApp()和mount()的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
    <div id="root_div2"></div>
</body>
<script>
    //使用Vue创建一个实例连接到root_div组件，注入内容
    Vue.createApp({
        template:'<div>Hello World! heheheheheheda！！！</div>'
    }).mount('#root_div');
    Vue.createApp({
        template:'<div>Hello World! lueluelueluelue！！！</div>'
    }).mount('#root_div2');
</script>
</html>

效果：

把对应的mount()注释掉，对应的组件就不会生效了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
    <div id="root_div2"></div>
</body>
<script>
    //使用Vue创建一个实例连接到root_div组件，注入内容
    Vue.createApp({
        template:'<div>Hello World! heheheheheheda！！！</div>'
    }).mount('#root_div');
    // Vue.createApp({
    //     template:'<div>Hello World! lueluelueluelue！！！</div>'
    // }).mount('#root_div2');
</script>
</html>

Demo：变量、数据UI绑定

本demo涉及的语法或知识：

-template:意思是在mount()指定的组件中，展示template的内容；

-变量的使用，用双花括号{{}}表示，如template:'<div>{{content}}</div>'

-data(){ return{ ***:*** } }函数的使用，可以配合template完成数据UI双向绑定；

修改body#script部分的代码：

<script>
    //使用Vue创建一个实例连接到root_div组件，注入内容
    Vue.createApp({
        data(){
            return{
                content: '66668686'
            }
        },
        template:'<div>{{content}}</div>'
    }).mount('#root_div');
</script>

效果：

data()完成数据配置，template指定UI，两者配合完成双向绑定；
mount()指定渲染的目的HTML组件，各司其职！

Demo：mounted()应用

本demo涉及的语法或知识：

-mounted()方法，当页面加载完成的时候会调用，其实它就是一个 Vue生命周期回调；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                content: '66668686'
            }
        },
        mounted(){
            console.log('monnted ====')
        },
        template:'<div>{{content}}</div>'
    }).mount('#root_div');
</script>
</html>

效果：

可见当页面加载完成时候，会自动调用mounted()中的逻辑，执行其中的代码；

&举一反三：
再一例，利用这个生命周期回调，我们写一个迭代计时器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                content: 66668686
            }
        },
        mounted(){
            setInterval(() => {
                this.content += 1;
                console.log('monnted ====' + this.content)
            }, 1000);            
        },
        template:'<div>{{content}}</div>'
    }).mount('#root_div');
</script>
</html>

注意：this.content等价于this.$data.content

效果图：

Demo：Vue事件绑定（v-on）、`methods`对象

本demo涉及的语法或知识：

-template的冒号之后，可以用反引号 “ ` ” 来囊括表述更多的组件；

-v-on:是Vue的一个指令，表示要绑定事件；
v-on:click表示要绑定点击事件；

-methods对象中可以用来编写Vue架构中使用到自定义函数/方法；

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
</body>

<script>
    Vue.createApp({
        data(){
            return{
                content: 66668686
            }
        },
        methods:{
            onBtnClick(){
                alert("heheda");
            }
        },
        template:`
        <div>
            {{content}}
            <button v-on:click="onBtnClick">反转字符串</button>
        </div>
        `
    }).mount('#root_div');
</script>
</html>

运行代码、点击按钮，其UI效果如下：

&继续例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
</body>

<script>
    Vue.createApp({
        data(){
            return{
                content: 'hehedaheheda'
            }
        },
        methods:{
            onBtnClick(){
                this.content = this.content.split('').reverse().join('');
                console.log(this.content);
            }
        },
        template:`
        <div>
            {{content}}
            <button v-on:click="onBtnClick">反转字符串</button>
        </div>
        `
    }).mount('#root_div');
</script>
</html>

效果：点击按钮不断地反转字符串：

Demo：Vue指令（v-if）

本demo涉及的语法或知识：

-v-if：标签配置了v-if指令的话，
则标签（对应UI组件）的显示与否由v-if指令所指定的值决定；

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
</body>

<script>
    Vue.createApp({
        data(){
            return{
                show: true
            }
        },
        methods:{
            onBtnClick(){
                this.show = !this.show;
            }
        },
        template:`
        <div>
            <span v-if="show">hehedadahehedada</span>
            <button v-on:click="onBtnClick">显示/隐藏字符串</button>
        </div>
        `
    }).mount('#root_div');
</script>
</html>

效果：

Demo：Vue指令（v-for、v-model）、综合Demo：TODOlist、双向绑定案例再体会

本demo涉及的语法或知识：

-v-for：标签配置了v-for指令，
则标签（对应UI组件）可以迭代遍历其绑定的数据List，
遍历的内容（index、item等）可以由v-for指定；

-v-model：标签配置了v-model指令，
则标签（对应UI组件）的内容（如input标签对应的输入框组件的内容），
会跟v-model指定的数据变量/字段（一般这个数据字段存放在data()特性函数中）的值双向绑定！！！；

上代码：

<li v-for="item of hehedaList">{{item}} lalala</li>
通过使用v-for指定item为遍历临时对象，去遍历了数据listhehedaList；

还有 43% 的精彩内容

最后编辑于：2021.04.07 15:26:42

支付 ¥1.00 继续阅读

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,324评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,303评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,192评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,555评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,569评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,566评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,927评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,583评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,827评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,590评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,669评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,365评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,941评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,928评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,159评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,880评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,399评论 2赞 342

Vue3 | 基本特性概念 与语法的 应用与案例

完整原文地址见简书https://www.jianshu.com/p/4b57257de535

更多完整Vue笔记目录敬请见《前端 Web 笔记 汇总目录（Updating）》

Vue3 特性升级

本文主要涉及的 语法糖 与 知识点：

Demo：HelloWorld

开始步骤

Demo：变量、数据UI绑定

Demo：mounted()应用

Demo：Vue事件绑定（v-on）、methods对象

Demo：Vue指令（v-if）

Demo：Vue指令（v-for、v-model）、综合Demo：TODOlist、双向绑定案例再体会

推荐阅读更多精彩内容

Vue3 | 基本特性概念与语法的应用与案例

更多完整Vue笔记目录敬请见《前端 Web 笔记汇总目录（Updating）》

本文主要涉及的语法糖与知识点：

Demo：Vue事件绑定（v-on）、`methods`对象