Vue快速入门
一、Vue是什么?
Vue(或Vue.js)是一款流行的开源JavaScript框架,用于构建用户界面和单页面应用程序(SPA)。它由尤雨溪于2014年创建并开源。Vue具有轻量级、高效、灵活和易于学习等特点,因此在Web开发中越来越受欢迎。Vue的核心思想是数据驱动,即实时响应数据更新,根据数据动态渲染DOM。Vue采用了组件化的方式来组织代码,使得组件可以互相独立、可复用和可组合,大大提高了开发效率。同时,Vue也具有丰富的插件和生态系统,可以满足各种开发需求。
二、 Vue2和Vue3的区别
Vue 3是Vue 2的升级版,主要有以下几个方面的改进:
-
性能优化:Vue 3通过模板编译器的升级和优化,大大提高了渲染性能;
-
更小的包体积:Vue 3的体积比Vue 2小很多;
-
Composition API:Vue 3新增了Composition API,使得代码更加组织化和可复用;
-
更好的TypeScript支持:Vue 3对TypeScript的支持更加友好,支持TypeScript编写Vue组件;
-
更好的Tree Shaking支持:Vue 3通过ES modules使得Tree Shaking更加友好;
-
更好的错误处理:Vue 3对错误处理进行了优化,更容易捕获和调试错误。
总之,Vue 3相比Vue 2在性能、包体积、代码组织、TypeScript支持、Tree Shaking支持和错误处理等方面都有了不同程度的改进和优化。
三、Vue入门
以下以Vue2为例
1.引入库
代码如下:
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.实例
Vue 是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点,Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用 Vue:
·无需构建步骤,渐进式增强静态的 HTML
·在任何页面中作为 Web Components 嵌入
·单页应用 (SPA)
·全栈 / 服务端渲染 (SSR)
·Jamstack / 静态站点生成 (SSG)
·开发桌面端、移动端、WebGL,甚至是命令行终端中的界面
2.1 数据组成的网页
Vue的主旨就是让网页有数据组成,举个简单案例
代码如下:
<body>
{{message}}
<div id="app">
{{message}}
<br>
<span>{{book}};name:{{book.bookName}}</span>
<ul>
<li>
{{campus}}
</li>
<li>
{{campus[0]}}
</li>
</ul>
</div>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello vue!",
book: {
bookId: 1,
bookName: "《初生》"
},
campus: ["1", "2", 3]
}
})
</script>
</body>
2.2 Vue常用指令
Vue官方提供了一些指令,这里举例一些常用的。
2.2.1 v-text和v-html
-
v-text可以将元素的 textContent 更新为指定的表达式的值。与使用双括号语法 {{ expression }} 一样,v-text 也可以用于显示动态内容。
-
v-html,用于将数据渲染为 HTML,并插入到 DOM 中。在 Vue 应用中,通常情况下我们使用 {{}} 或 v-bind 将数据渲染到 DOM 中,但是如果数据中包含 HTML 标签,这些标签会以字符串的形式展示在页面上,而不是以 HTML 的形式渲染。使用 v-html 指令可以解决这个问题,它会将绑定的数据作为 HTML 插入到 DOM 中,从而正确地渲染 HTML。
-
区别 :
v-text 和 v-html 都是 Vue 中常用的指令,用于绑定文本内容。它们之间的主要区别在于,v-text 会将元素的 textContent 设置为绑定的值,而 v-html 则会将元素的 innerHTML 设置为绑定的值。
具体来说,使用 v-text 指令绑定的内容,会被自动转义,不会被解析为 HTML 标签。而使用 v-html 指令绑定的内容,可以包含 HTML 标签和 JavaScript 代码,并会被解析和渲染。
因此,v-html 指令应该谨慎使用,因为它可能导致 XSS 攻击。在绑定内容时,应该优先考虑使用 v-text 指令,只有在确实需要渲染 HTML 标签时才使用 v-html 指令。
代码如下:
<body>
<div id="app">
<h2 v-html="message"></h2>
<h2 v-text="message+'!'"></h2>
<h2>{{message}}!</h2>
</div>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message:"<h1>ysd</h1>"
}
})
</script>
</body>
2.2.2 v-on
-
v-on用来绑定事件监听器的一个指令,它可以监听 DOM 事件,如 click、input、submit 等。v-on 指令后面跟着一个事件名,用于监听特定的事件。当监听到事件时,可以执行特定的 Vue 方法或 JavaScript 函数。
-
v-on 还可以简写为 @,例如 @click、@input、@submit 等,这样可以缩短模板代码。
代码如下:
<body>
<div id="app">
<input type="button" value="getName1" v-on:click="getName">
<input type="button" value="getName2" @click="getName">
<!-- 特殊事件 -->
<input type="text" @keyup.enter="getName">
<h2 @click="changName">{{name}}</h2>
</div>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
name: "who am i?"
},
methods: {
getName: function () {
alert("ysd");
},
changName: function () {
this.name += "ysd";
}
}
})
</script>
</body>
2.2.3 v-if、v-bind和v-show
- v-if 用于根据条件来渲染页面内容。它接受一个表达式作为参数,当表达式的值为 true 时,渲染对应的内容,否则不渲染。使用 v-if 的元素在条件不满足时将被从 DOM 树中移除,当条件再次满足时,元素将重新插入 DOM 树中。
需要注意的是,v-if 是一个条件渲染指令,因此频繁使用可能会导致页面的性能问题。如果需要在同一个元素中根据不同条件渲染不同的内容,可以考虑使用 v-show 指令,它只是简单地控制元素的显示或隐藏,不会改变元素的 DOM 结构。
- v-bind 用于绑定 HTML 属性或组件的 props 到 Vue 实例中的数据。在绑定时需要加上冒号(:),如 :href=“url”。这个指令主要用于实现动态渲染,让 Vue 实例中的数据和 HTML 属性或组件的 props 进行双向绑定。
在 Vue 2 和 Vue 3 中,v-bind 指令的使用方式相同,但在 Vue 3 中,如果要使用v-bind指令绑定 class 或 style,可以使用v-bind:style 和 v-bind:class 来替代 Vue 2 中的:style 和 :class,这是由于在 Vue 3 中,这两个指令支持了数组和对象形式的参数。
- v-show 是 Vue.js 提供的一个指令,用于控制元素的显示和隐藏。它与 v-if 的作用类似,但是不同的是,无论条件是否成立,使用 v-show 指令的元素都会被渲染到页面中,只是通过控制元素的 display 属性来实现显示和隐藏。
具体来说,当 v-show 的绑定值为 true 时,元素会显示;当绑定值为 false 时,元素会隐藏,而且元素的 display 属性会被设置为 none。
和 v-if 相比,v-show 更适用于需要频繁切换的元素,因为它只是控制元素的 display 属性,而不是每次都重新渲染元素。而 v-if 适用于需要条件渲染的元素,因为它可以直接决定元素是否需要被渲染到页面中。
代码如下:
<body>
<div id="app">
<!-- v-show,切换元素display -->
<!-- v-bind:属性="值" -->
<img v-show="isShow" v-bind:src="imgSrc" :class="" style="width: 180px;height:240px">
<input type="button" @click="changeIsShow" value="changeISShow"></input>
<img v-show="1>10" src="img/moon.jpg">
<!-- 修改dom,即删除或添加 -->
<!-- v-if:判断,通过控制dom节点的存在与否来控制元素的显隐 -->
<img v-if="isShow" src="img/moon.jpg" :title="imgTitle+'!'" style="width: 180px;height:240px">
<img v-if="1>10" src="img/moon.jpg">
</div>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: true,
imgSrc:"img/moon.jpg",
imgTitle:"moon"
},
methods: {
changeIsShow: function () {
this.isShow = !this.isShow;
}
}
})
</script>
</body>
2.2.4 v-for
- v-for 用于渲染列表数据的指令。它可以遍历数组、对象、字符串等可迭代的数据,并基于数据生成相应的 DOM 元素。在渲染列表时,可以使用 v-for 通过循环绑定数据并动态生成相应的 DOM 元素。
代码如下:
<body>
<div id="app">
<ul>
<li v-for="value in arr">
<h3>id:{{value.id}}</h3>
<h3>name:{{value.name}}</h3>
</li>
<ul>
</div>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
arr: [
{ id: 1, name: '小明' },
{ id: 2, name: '小红' },
{ id: 3, name: '小绿' },
]
}
}
})
</script>
</body>
2.2.5 v-model
- v-model用于双向数据绑定。v-model可以将表单控件与Vue实例中的数据属性绑定在一起,当表单控件的值发生改变时,绑定的数据属性也会同步更新,反之亦然。v-model适用于文本输入框、单选按钮、多选按钮、下拉选择框等表单控件。
代码如下:
<body>
<div id="app">
<input type="button" @click="sayHello('ysd')" value="click">
//@keyup = 键盘输入 ; @keyup.enter = 输入回车键
//v-model = html数据与js数据同步更新
<input type="text" v-model="massage" @keyup.enter="sayHello(getM())">
</div>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
massage: 'ysd'
},
methods: {
sayHello: function (x) {
alert("hello " + x);
},
getM:function(){
return this.massage;
}
}
})
</script>
</body>