10-Vue新手快速入门

ztj100 2024-12-31 15:58 10 浏览 0 评论

1、Vue是什么

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化

2、Vue简介

1）、学习的基础

如果想要学习Vue，官方指南建议了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意。

2）、库和框架的区别

库(如jQuery)

库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API

框架（Vue）

框架提供了一套完整解决方案,使用者要按照框架所规定的某种规范进行开发

3）、为什么要学Vue

传统开发模式: JQuery+RequireJS/SeaJS+artTemplate+Gulp/Grunt

随着项目业务场景的复杂,传统模式已无法满足需求

就出现了Angular/React/Vue等框架

企业需求
主流框架之一(React Angular Vue)
易用、灵活、高效

4）、Vue能做什么

最大程度上解放了 DOM 操作
单页web项目(SinglePageApplication项目,例如Worktile官网)开发
传统网站开发

5）、Vue核心特性

双向数据绑定vue(借鉴了react的虚拟DOM,借鉴了angular双向数据绑定)

通过指令扩展了 HTML，通过 表达式 绑定数据到 HTML

解耦视图与数据

可复用组件

虚拟DOM

M-V-VM

数据驱动视图

3、安装Vue

1）、通过cdn的方式安装

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2）、NPM方式安装

# 最新稳定版
$ npm install vue

3）、直接下载源码然后通过路径引入

开发版本：https://vuejs.org/js/vue.js
生产版本：https://vuejs.org/js/vue.min.js

Vue.js 不支持 IE8 及其以下版本

4、第一个项目HelloWorld

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  {{ message }}
		</div>
		
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello World!'
			})
		</script>
	</body>
</html>

代码说明：

el

作用:当前Vue实例所管理的html视图
值:通常是id选择器(或者是一个 HTMLElement 实例)
不要让el所管理的视图是html或者body!

data

Vue 实例的数据对象，是响应式数据(数据驱动视图)
可以通过 vm.$data 访问原始数据对象
Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a
视图中绑定的数据必须显式的初始化到 data 中

methods

其值为可以一个对象
可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
方法中的 this 自动绑定为 Vue 实例。
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined

除了以上常用的三个Vue实例选项, 还有很多选项,后续课程会陆续讲解

5、术语解释

插值表达式

作用:会将绑定的数据实时的显示出来:

通过任何方式修改所绑定的数据,所显示的数据都会被实时替换

{{js表达式、三目运算符、方法调用等}}

不能写 var a = 10; 分支语句循环语句

    <div id="app">
        <!-- 在插值表达式中可以访问vm实例中data里面的属性 -->
        {{message}}
        <p>{{message}}</p>
        <p>{{message+'啦啦啦'}}</p>
        <p>{{age>18?'成年':'未成年'}}</p>
        <p>{{message.split("")}}</p>
        <!-- 在插值表达式中不能写js语句 -->
        <p>{{var a = 10}}</p>
    </div>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中的message属性的值',
                age: 20
            }
        });
    </script>

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue框架提供的语法

扩展了HTML的能力

减少DOM操作

  <div id="app">
        <p> {{message}}</p>
        <!-- v-on就是vue给标签元素提供的扩展-指令
            v-on指令就是给标签绑定事件,这里是click,
            当事件处于点击状态时,出发methods中的changeMsg方法
        -->
        <button v-on:click="changeMsg">按钮</button>
    </div>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中的message属性的值',
                age: 20
            },
            methods: {
                changeMsg: function() {
                    this.message += "啦";
                }
            }
        });
    </script>

6、Vue常用指令

Vue的指令扩展了html标签的功能、大部分的指令的值是js的表达式，取代DOM操作。

1）、v-text和v-html

很像innerText和innerHTML

v-text:更新标签中的内容

v-text和插值表达式的区别

v-text 更新整个标签中的内容
插值表达式: 更新标签中局部的内容

v-html:更新标签中的内容/标签

可以渲染内容中的HTML标签
注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)

 <div id="app">
        <!-- v-text指令的值会替换标签内容 -->
        <p>{{str}}</p>
        <p v-text="str"></p>
        <p v-text="str">我是p标签中的内容</p>
        <p v-text="strhtml">我是p标签中的内容</p>
        <p v-html="str"></p>
        <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
        <p v-html="strhtml">我是p标签中的内容</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                str: 'abc',
                strhtml: '<span>content</span>'
            }
        });
    </script>

2）、v-if和v-show

作用:根据表达式的bool值进行判断是否渲染该元素。

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。

 <div id="app">
        <!-- 如果isShow的值是true ,就显示p标签 -->
        <p v-if="isShow">我是p标签中的内容</p>
        <p v-show="isShow">我是p标签中的内容</p>
        <!-- 如果标签显示与隐藏切换频繁, 就使用v-show 
            v-show本质是通过修改标签的display值
        -->
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        });
    </script>

3）、v-on

作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。
语法: @事件名.修饰符 = "methods中的方法名"
注意: $event 可以传形参

 <div id="app">
        <!-- v-on.xx事件名='当触发xx事件时执行的语句' -->
        <!-- 执行一段js语句:可以使用data中的属性 -->
        <button v-on:click="count += 1">增加 1</button>
        <!-- v-on的简写方法 -->
        <button @click="count += 1">增加 1</button>
        <!-- 执行一个方法 -->
        <button @click="add">增加 1</button>
        <!-- 执行一个方法、这种写法可以传形参 -->
        <button @click="fn1(count)">执行fn1方法</button>
        <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event -->
        <button @click="fn2($event)">执行fn2方法</button>
        <hr>
        <!-- 和v-for结合使用 -->
        <button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法</button>
        <!-- v-on修饰符 如 once: 只执行一次 -->
        <button @click.once="fn4">只执行一次</button>

        <p>上面的按钮被点击了 {{ count }} 次。</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0,
                items: ['a', 'b', 'c']
            },
            methods: {
                add: function() {
                    this.count += 1;
                },
                fn1: function(count) {
                    console.log(count);
                    console.log('fn1方法被执行');
                },
                fn2: function(e) {
                    console.log(e);
                    console.log('fn2方法被执行');
                },
                fn3: function(index) {
                    console.log(index);
                    console.log('fn3方法被执行');
                },
                fn4: function() {
                    console.log('fn4方法被执行了');
                }
            }
        });
    </script>

修饰符

.once - 只触发一次回调。
.prevent - 调用 event.preventDefault()。

简写: @事件名.修饰符 = 'methods中的方法名'

4）、v-for

根据一组数组或对象的选项列表进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法
items 是源数据数组 /对象
当要渲染相似的标签结构时用v-for

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染
				v-for="元素 in 容器(数组和对象)"
				v-for="数组中的元素 in data中的数组名"
				v-for="对象中的属性值 in data中的对象名"
			-->
            <!-- 数组 -->
            <p v-for="item in list">{{item}}</p>
            <hr>
            <p v-for="(item,index) in list">{{item}}----{{index}}</p>
            <!-- (v,i) in 数组
				v:数组中的每个元素
				i:数组中元素的下标
			-->
            <hr>
            <!-- 对象 -->
            <!-- (v,k,i)in 对象
				v:值
				k:键
				i:对象中每对key-value的索引 从0开始
				注意: v,k,i是参数名,见名知意即可!
			-->
            <p v-for="value in per">{{value}}</p>
            <hr>
            <p v-for="(value,key) in per">{{value}}----{{key}}</p>
            <hr>
            <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p>

        </div>
        <script src="./vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    list: ['a', 'b', 'c'],
                    per: {
                        name: '老王',
                        age: 38,
                        gender: '男'
                    }
                },
                methods: {

                }
            })
        </script>
    </body>

</html>

注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)


 <div id="app">

        <!-- v-for 
            key属性: 值通常是一个唯一的标识
            key是一个可选属性
            养成好习惯:建议在写v-for时 设置:key="唯一值"
        -->
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}---{{index}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: ['a', 'b', 'c']
            },
            methods: {

            }
        });
    </script>

5）、v-bind

作用: 可以绑定标签上的任何属性。

绑定src和id属性

  <div id="app">
        <!-- data中的属性值会替换为标签的属性值 -->
        <img v-bind:src="src" />
        <p v-bind:id="idValue">内容</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                src: './logo.png',
                idValue: 'b'
            }
        });
    </script>

绑定class类名

（1）对象语法

如果isActive为true，则返回的结果为 <div class="active"></div>

 .active {
            color: red;
 }

    <div id="app">
        <div v-bind:class="{active: isActive}">
            hei
        </div>
        <button @click="changeClassName">点击切换类名</button>
    </div>


  <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true
            },
            methods: {
                changeClassName: function() {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>

（2）数组语法

渲染的结果 <div class="active text-danger"></div>

<div v-bind:class="[activeClass, dangerClass]">
    hei
</div>
  <script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
        	activeClass: 'active',
          dangerClass: 'text-danger'
        }
    });
</script>

绑定style

（1）对象语法

渲染的结果<div style="color: red; font-size: 18px;"></div>

 <div id="app">
        <div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
            文本内容
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                redColor: 'red',
                font18: 18
            }
        });
    </script>

（2）数组语法

<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: {
                color: 'red'
            },
            fontSize: {
                'font-size': '18px'
            }
        }
    });
</script>

简化语法

<div v-bind:class="{active: isActive}">
</div>
<!-- 可以简化为 :，简化语法更常用 -->
<div :class="{active: isActive}">
</div>

6）、v-model

作用: 表单元素的绑定

特点: 双向数据绑定

数据发生变化可以更新到界面
通过界面可以更改数据
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 data选项中声明初始值。

（1）绑定文本框

效果:当文本框的值发生变化后，div中的内容也会发生变化。

 <div id="app">
        <p>{{message}}</p>
        <input type='text' v-model='message'>
        <hr>
        <!-- v-model其实是语法糖,它是下面这种写法的简写 -->
        <input v-bind:value='message' v-on:input='message = $event.target.value' />

    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'message默认值'
            }
        });
    </script>

（2）绑定多行文本框

 <div id="app">
        <textarea v-model="message">
           我是textarea内的插值表达式 无效 {{str}}
        </textarea>
        <div>{{ message }}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'message默认值',
                str: 'str字符串'
            }
        });
    </script>

注意：多行文本框中使用插值表达式无效

（3）绑定复选框

绑定一个复选框

checked是布尔类型的数据

<input type="checkbox" v-model="checked">
<div>{{ checked }}</div>

绑定多个复选框

此种方式需要input标签提供value属性。v-model绑定的是数组。

 <!-- 多个复选框  : 需要设置value属性值, v-model绑定的是数组-->
	<div id="app">
        <div>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                checkedNames: []
            }
        });
    </script>

绑定单选框

需要input提供value属性的值。

男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
{{sex}}
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            sex: ''
        }
    });
</script>

绑定下拉框

<div id="app">  
<!-- 下拉框 -->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select> <span> 您选择的是: {{selected}}</span>
</div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                selected: ''
            }
        });
    </script>

7）、v-cloak

问题:在使用vue绑定数据的时候，渲染页面有时会出现变量闪烁，例如：

    <div id="app" v-cloak>
        <p>{{message}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中message的数据'
            }
        });
    </script>

效果: 在页面加载时,有时会在页面中看到这个:

{{message}}

解决方案: 使用v-cloak

<div id="app" v-cloak>
    <p>{{message}}</p>
</div>

注意:要在css代码部分写如下代码

[v-cloak] {
    display: none;
}

这样:就可以防止页面闪烁。

8）、v-once

解决的问题:只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

 <div id="app">
        <p v-once>{{message}}</p>
        <input type="text" v-model="message">
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中message的属性的值'
            }
        });
    </script>

当添加v-once的指令所对应的元素, 其数据发生改变时,并不会再一次进行渲染。

v-cloak和v-once 不需要表达式, 直接将指令写在开始标签中即可。

vue 数组添加元素

上一篇：VUE数据双向绑定
下一篇：Vue3 样式绑定: 内联样式与Class属性的数组语法

10-Vue新手快速入门

1、Vue是什么

2、Vue简介

3、安装Vue

4、第一个项目HelloWorld

5、术语解释

6、Vue常用指令

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

10-Vue新手快速入门

1、Vue是什么

2、Vue简介

3、安装Vue

4、第一个项目HelloWorld

5、术语解释

6、Vue常用指令

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起