Vue入门

DT31

已于 2024-07-25 14:54:31 修改

阅读量711

点赞数 23

分类专栏： JAVA HTML 文章标签： vue.js 前端 javascript

于 2024-07-25 14:52:19 首次发布

本文链接：https://blog.csdn.net/weixin_62789590/article/details/140685723

版权

JAVA 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

Vue is a popular JavaScript framework for building user interfaces. It is often used for creating single-page applications and is known for its simplicity and flexibility. Vue allows developers to organize their code into reusable components, making it easier to build and maintain complex web applications. It also has a declarative syntax, making it intuitive and easy to understand. Vue is often compared to other frameworks like React and Angular, and it has a large and active community of developers who contribute to its development and share their knowledge through forums and online resources.

1.VUE介绍

1.1.Vue是什么

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

渐进式框架： 就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性

1.2.Vue的特点

轻量

Vue.js库的体积非常小的，并且不依赖其他基础库。

数据双向绑定-回显简单

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

指令

内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

插件化

Vue.js核心不包含Router(路由)、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

组件化，他支持自定义标签

组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

1.3.MVVM思想

Vue是一款开源的JavaScript MV*（MVVM、MVC）框架。

Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构.

M ：即Model，模型，包括数据(json对象)和一些基本操作
V ：即View，视图（html便签），页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

只要我们Model发生了改变，View上自然就会表现出来。
当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上.

总结一下：MVVM的思想就是数据模型和视图的双向绑定，只要数据变化，视图会跟着变化，只要视图被修改，数据也会跟者变化。

2.入门

官方文档：https://cn.vuejs.org/

2.1.Vue安装和使用

创建一个静态的web项目，然后安装VUE ， VUE官网地址：https://cn.vuejs.org/

使用CDN方式

Vue有两种使用方式，1是使用cdn或者本地方式直接引入JS库，2.使用Npm安装VUE库，第一种方式如下：

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

CDN（Content Delivery Network，内容分发网络）是由分布在不同地理位置的代理服务器及其数据中心组成的网络：

当然也可以手动下载该vue的JS库到本地项目，然后引入JS库

使用NPM安装VUE

使用Terminal初始化：npm init -y

改名了是初始化NPM，会在项目中产生一个package.json文件。
安装vue：

全局安装：npm install -g vue

局部安装：npm install vue

安装成功后VUE的JS库：node_modules/vue/dist/vue.js

[注意] 项目的名称不能使用“vue”，不然会报错

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具，也是世界上最大的软件注册表，里面包含超过600000 个包的结构，能够使您轻松跟踪依赖项和版本。

安装 Vue 和 vue-server-renderer 可能会遇到一些问题，以下是一些常见的解决方法：

确保你已经安装了 Node.js。Vue 和 vue-server-renderer 都依赖于 Node.js 环境。
确保你使用了正确的命令来安装 Vue 和 vue-server-renderer。在项目的根目录下运行以下命令：
```
npm install vue vue-server-renderer
```
或者使用 yarn：
```
yarn add vue vue-server-renderer
```
检查你的网络连接是否正常。如果你的网络连接不稳定，可能会导致安装失败。可以尝试使用 VPN 或者等网络连接恢复正常后再试一次。
清除 npm 的缓存。运行以下命令清除 npm 的缓存：
```
npm cache clean --force
```
然后再次尝试安装 Vue 和 vue-server-renderer。
如果你使用的是 Windows 系统，并且在安装过程中遇到权限问题，可以使用管理员身份运行命令提示符或 PowerShell，然后再尝试安装 Vue 和 vue-server-renderer。

如果以上方法都不能解决问题，建议到 Vue 的官方论坛或者社区中寻求帮助。

2.2.Hello World程序

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

创建vue-demo.html,目录结构如下：

vue-demo
   node_modules
   package.json
   package-lock.json
   pages
       vue-demo.html

vue-demo.html

<script type="application/javascript" src="../node_modules/vue/dist/vue.js"></script>
---------------------------------------------------
<body>
    <div id="app">
        <!--        取data中的数据-->
        {{ message }}
    </div>
</body>
---------------------------------------------------
<script type="application/javascript">
    var app = new Vue({
        //使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

Hello Vue!

2.3.VUE的el挂载

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用。

2.4.VUE的数据“data”

<body>
    <div id="app">
        <!--        取data中的数据-->
        {{ message }}
        <hr/>
        {{ user }}
        <hr/>
        {{ user.username }}	//取对象中的数据
    </div>
</body>
<script type="application/javascript">
    var app = new Vue({
        //使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据
        data: {
            message: 'Hello Vue!',	//普通数据
            user:{	//对象数据
                username:"DT",
                age:31
            }
        }
    })
</script>

注意：{{}}取值不能脱离VUE绑定的元素。

2.5.VUE的方法

所有的方法都在methods属性中定义，方法的调用可以通过在VUE绑定的页面元素中使用{{方法名()}} 的方式，也可以在js中通过VUE对象调用.

<body>
    <div id="app">
        <!--        取data中的数据-->
        取普通值：{{ message }}
        <hr/>
        取对象值：{{ user }}
        <hr/>
        取对象中的属性：{{ user.username }}
        <hr/>
        调用方法：{{showUser('参数')}}
    </div>
</body>
<script type="application/javascript">
    var app = new Vue({
        //使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据 ，所有的数据都在这里绑定
        data: {
            message: 'Hello Vue!',
            user:{
                username:"DT",
                age:31
            }
        },
        //vue的方法，所有的方法都在这里定义
        methods:{
            showUser(args){
                //这里的 this 代表 Vue对象
                console.log(this.user.username);
                console.log(this.user.age);
                console.log(args);
            }
        }
    })

    //调用vue方法
    app.showUser('我也是参数');
</script>

2.6 vue生命周期与钩子函数

1、beforeCreate（创建前）：vue实例初始化之前调用

此阶段为实例初始化之后，此时的数据观察和事件配置都还没有准备好，而此时的实例中的data和el还是undefined状态，不可用的，dom元素也未加载,此时使用html片段代码我们加上ref属性，用于获取DOM元素的操作会报错，详细效果请使用代码测试。

注入：将methods、data等挂载到vue实例当中。

2、created（创建后）：vue实例初始化之后调用

beforeCreate之后紧接着的钩子就是创建完毕created，此时我们能读取到data的值，但是DOM还没有生成，所以属性el还是不存在的，dom元素也未加载。

生成render函数，用来渲染。在挂载开始之前被调用：相关的 render 函数首次被调用

3、beforeMount（载入前）：挂载到DOM树之前调用

此时的$el成功关联到我们指定的DOM节点，但是此时的DOM元素还未加载，如果此时在DOM元素中绑定数据使用{{name}}后里边的name不能成功地渲染出我们data中的数据

4、mounted（载入后）：挂载到DOM树之后调用

挂载完毕阶段，到了这个阶段数据就会被成功渲染出来。DOM元素也加载出来了，html片段代码我们加上ref属性，可以获取DOM元素。

5、beforeUpdate（更新前）：数据更新之前调用

当修改Vue实例的data时，Vue就会自动帮我们更新渲染视图，在这个过程中，Vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。html片段代码我们加上ref属性，用于获取DOM元素。Dom元素上的数据还没改变。

6、updated（更新后）：数据更新之后调用

此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容。此时加载的DOM元素上的数据更新了。

7、beforeDestroy（销毁前）：vue实例销毁之前调用

调用实例的destroy()方法可以销毁当前的组件，在销毁之前，会触发beforeDestroy钩子。

8、destroyed（销毁后）：vue实例销毁之后调用

成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑，此时再修改name的值，试图不在更新，说明实例成功被销毁了。

vue的生命周期：就是vue对象从创建到销毁的整个过程。

vue对象大概生命周期：创建--挂载-销毁，在这些阶段它提供了一些钩子函数，让我们可以在这些生命周期中做事情。创建前，创建后，挂载前，挂载后，销毁前，销毁后等钩子，我们可以写函数挂载在钩子上面，到达对应的声明周期就能执行我们操作。

整个生命周期中，主动执行的函数，称为钩子函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue声明周期</title>
    <script src="js/plugins/dist/vue.js"></script>
</head>
<body>
    <div id="myDiv"></div>
    <!--声明周期 从产生到销毁中间经历的过程就叫声明周期-->
    <script type="text/javascript">
        new Vue({
            el:"#myDiv",
            data:{

            },
            methods:{

            },
            //构造
            beforeCreate() {
            },
            created(){
                alert("created");
            },
            beforeMount(){

            },
            mounted(){
                //挂载完成后，就相当于js中window.onload,相当于jQuery中$(fuction(){}),就是挂载点里面所有
                //标签都已经加载了
                alert("mounted");
            }
        });
    </script>
</body>
</html>

三 VUE的表达式

1 表达式语法

VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

2 简单表达式

在{{ }}中可以进行简单的运算.

<div id="app">
	<!--简单表达式  -->
	<h1>{{num1+num2}}</h1>
	<!-- +:运算，字符串连接 -->
	<h1>{{5+"v5"}}</h1>
	<h1>{{5+"5"}}</h1>
	<!-- -：减法 -->
	<h1>{{"5"-"5"}}</h1>
	<h1>{{5*5}}</h1>
	<!-- *:乘 -->
	<h1>{{"5"*"5"}}</h1>
	<!-- / 除-->
	<h1>{{5/5}}</h1>
	<h1>{{5/5}}</h1>
 </div>
---------------------------------------------------------------------------------------------------
var app = new Vue({
  //挂载到id=app元素上
  	el:"#app",
	data:{
       num1: 10,
       num2: 20
    },
});

3 三目运算符

在{{}}中的表达式可以使用data中数据，可以使用三元运算符,但是不能够使用其他语句

<div id="app">
	<!--三目运算  -->
	{{ show1?"真":"假"}}
</div>

var app = new Vue({
	el : "#app",
	data : {
		show1 : true
	}
});

4 字符串操作

直接使用字符串字面值作为字符串对象
使用data中的字符串对象

<div id="app">
    {{"这是字面值"}}<br/>
    {{"这是字面值".length}}<br/>
    {{message.length}}<br/>
    {{message.substring(1,5)}}<br/>
    {{message.substring(2,6).toUpperCase()}}<br/>
</div>


var app = new Vue({
	el: "#app",
	data: {
		message: "这是data中的数据"
	}
});

5 对象操作

在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

<div id="app">
    {{user}}<br/>
    {{JSON.stringify(user)}}<br/>
    {{user.toString()}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.getAge()}}<br/>
</div>

var user = {
	name: "DT",
	age: 18,
	getAge: function () {
		return this.age
	},
	toString:function(){
		return "姓名:"+this.name+",年龄:"+this.age;
	}
};
var app = new Vue({
	el: "#app",
	data: {
		user: user
	}
});

6 数组操作

在表达式中可以使用JavaScript数组中的任何语法来操作数组.

<div id="app">
    {{hobbys}}<br/>
    {{hobbys[0]}}<br/>
    {{hobbys.length}}<br/>
    {{hobbys.toString()}}<br/>
    {{hobbys.join("-")}}<br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		hobbys:["摸鱼","吃饭",'睡觉',"写代码"]
	}
});

四.VUE的指令

官方文档：https://cn.vuejs.org/v2/api/#v-text

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
一个标签元素上可以出现多个指令属性
指令只能够出现在Vue对象所挂载的标签范围内的标签中

常用指令如下：

v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-for=“表达式” 循环
v-bind="函数" 绑定事件
v-model=“表达式” 数据双向绑定
v-show="布尔" 是否显示元素
v-if(else else if)=“表达式” 判断条件
v-on=“表达式” 注册事件

1 v-text

给标签设置文本

语法

<标签 v-text="textValue"></标签>

<div id="app">
    <span v-text="message"></span><br/>
    <span v-text="user.username"></span><br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		message: "<h1>这是一个Span!</h1>",
		user: {
			username: "lw"
		},
	}
});

给元素填充纯文本内容

2 v-html

给标签设置文本：通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

语法

<标签 v-html="htmlValue"></标签>

<div id="app">
    <div v-html="message"></div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		message: "<h1>这是HTMl代码</h1>"
	}
});

【注意】和v-text的区别是v-html会把内容的html符号进行渲染

3 v-for

循环：v-for可以作用于：数字，字符串，数组，对象

语法一：普通用法

<标签 v-for="item in 数据源">{{item}}</标签>

语法二：带索引

<标签 v-for="(元素,索引) in 数据源">{{元素}}=={{索引}}</标签>

语法三：键，值，索引
[注意]这里的键是指对象的属性名，这种方式适合用来遍历对象的所有属性
```
<标签 v-for="(元素,键,索引) in 对象"></标签>
```

<div id="app">
    <h1>循环数组</h1>
    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
        <li v-for="value in student">{{value}}</li>
    </ul>

    <h1>带索引循环数组</h1>
    <ul>
        <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
    </ul>
    <h1>带键遍历对象</h1>
    <ul>
        <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
    </ul>
</div>

var app = new Vue({
	el: "#app",
	data: {
		hobbys : ["吃饭","睡觉","打豆豆","写代码"],
		student : {
			name: "DT",
			age: 31,
			sex: "男",
		},
		num : 10,
		str : "csdnnet",
	}
});

4 v-bind

属性绑定：将data中的数据绑定到标签上,作为标签的属性值.

语法一

<标签 v-bind:标签属性名字="表达式"></标签>

语法二：简写

<标签 :标签属性名字="表达式"></标签>

语法三：为一个标签绑定一个对象作为该标签的多个属性

<标签 v-bind="对象"></标签>

5 v-model 指令

在表单控件上创建双向绑定,表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,

当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定

v-model只作用于以下表单: input select textarea

 <标签 v-model="表达式"></标签>

<div id="app">
  <h1>绑定到type=text的input表单元素</h1>
  姓名:<input type="text" v-model="inputValue"><br/>
  data中的值:{{inputValue}}

  <h1>绑定到type=checkbox的input表单元素</h1>
  打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
  踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
  data中的值:{{checkboxValue}}


  <h1>绑定到type=radio的input表单元素</h1>
  打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
  踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
  data中的值:{{radioValue}}

  <h1>绑定到textarea的元素</h1>
  个人简介:<textarea v-model="textareaValue"></textarea><br/>
  data中的值:{{textareaValue}}


  <h1>绑定到单选的select的元素</h1>
  技能:<select v-model="skills">
        <option value="java">java</option>
        <option value="php">php</option>
        <option value=".net">.net</option>
      </select><br/>
  data中的值:{{skills}}

</div>

var app = new Vue({
	el: "#app",
	data: {
		inputValue: "初始化的值",
		checkboxValue: ["踢足球"],
		radioValue: "打篮球",
		textareaValue: "我是一个优秀的软件工程师!",
		skills: "java",
	}
});

6 v-show

根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。当v-show的值为假时, 会在标签的css中添加 display: none

 <标签名 v-show="表达式"></标签名>

7 v-if

语法一

<标签名 v-if="表达式"> ... </标签名>

语法二

 <标签名 v-if="表达式"></标签名>
 <标签名 v-else></标签名>

语法三

<标签名 v-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else></标签名>

8 v-on

使用v-on指令注册事件

<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
  简写方式
<标签 @事件句柄="表达式或者事件处理函数"></标签>

五计算属性和watch

1 computed

有的时候我们需要在页面进行复杂的计算，复杂的计算导致页面很乱，Vue中提供了计算属性，来替代复杂的表达式：

<div id="app">
    <h1>您的生日是：{{birth}} </h1>
</div>
-----------------------------------------------------------------
var vm = new Vue({
    el:"#app",
    data:{
        birthday:1429032123201 // 毫秒值
    },
    computed:{
        birth(){// 计算属性本质是一个方法，但是必须返回结果
            const d = new Date(this.birthday);
            return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
        }
    }
})

2 watch

watch可以让我们监控一个值的变化。从而做出相应的反应。

<div id="app">
      <input type="text" v-model="message">
</div>
-------------------------------------------------------------
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"xxxx"
        },
        watch:{
            message(newVal, oldVal){	//监听 message 的变化，调用该函数。
                console.log(newVal, oldVal);
            }
        }
    })
</script>

DT31

关注

23
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Vue入门

Vue (读音 /vjuː/，类似于*view*) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。渐进式框架：就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。
复制链接

扫一扫