vue3 vue.js的快速入门使用

vue.js库的下载

vue.js是目前前端web开发最流行的工具库/框架，由尤雨溪在2014年2月发布的。

另外几个常见的工具库：react.js、vue.js、angular.js、jQuery

官方网站：https://cn.vuejs.org/

官方文档：https://v3.cn.vuejs.org/guide/introduction.html

vuejs目前有1.x、2.x和3.x 版本，我们学习3.x版本的。

jQuery和vue的定位是不一样的。

jQuery的定位是获取元素和完成特效。

vuejs的定位是方便操作和控制数据和完成特效。

vuejs的使用

vuejs的使用官方提供了2种方式：

基于脚本导入使用，下载vue.js文件 或者网上别人保存在CDN服务器的vue.js文件，通过script标签引入到html网页。

基于项目构建工具来进行使用，需要安装项目构建工具，自动构建成一个独立的项目。

目前官方推荐的项目构建工具：npm、vue-cli、vite。

我们先通过vuejs的第1种方式来完成vue语法和基础内容的学习。这种方式的使用，vue的引入类似于jQuery，开发中可以使用开发版本vue-x.x.x.js，产品上线要换成vue.min.js。

github： https://github.com/vuejs/vue-next/tags

下载地址：https://v3.cn.vuejs.org/guide/introduction.html

https://cdn.jsdelivr.net/npm/vue@next/dist/

1.基于下载vue到本地并使用

Title

{{message}}

2.vue基本代码结构

Title

{{message}}

{{message}}

{{title}}

{{message}}

{{num}}

Title

{{message}}

{{num}}

{{is_delete}}

{{classmate}}

总结：

//1. vue的使用要从创建Vue管理对象开始，一个html页面中可以创建多个vm对象，每个vm之间互不干扰。

var vm = Vue.createApp({});

//2. 创建vue对象的时候，需要传递选项参数，选项参数就是json对象，json对象必须有data成员

var vm = Vue.createApp({

data(){

return {}

},

}).mount("#app");

//mount:设置vue可以操作的html内容范围，值一般就是css的id选择器。

//data: 保存vue.js中要显示到html页面的数据。

//3. vue.js要控制的内容范围，必须先通过id来设置。

{{message}}

{{message}}

vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种代码分工思想来的。

Model 指代的就是vue对象的data选项里面的数据。这里的数据要显示到HTML页面中。

View 指代的就是vue中数据要显示的HTML页面，也称之为“视图模板” 。

ViewModel 指代的是vue.js中Vue.createApp创建实例对象vm了，它是vue.js的核心，负责连接 View 和 Model，保证视图的变量值和data选项中变量的值一致性，所以前面代码中，data选项里面的数据被显示中p标签中就是vm对象自动完成的。vm对象会时刻的监控View和Model的变化，并保持双方数据的一致性！！！有时候，这个特性也叫双向数据绑定

编写代码，让我们更加清晰的了解MVVM：

Title

{{num}}

VM常用属性操作

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

Title

{{num}}

{{num}}

总结

createApp中的data选项，传递到vm对象内部时，已经变成了使用Proxy对象代理的属性，可以通过vm.$data来查询。

vm对象在经过调用mount方法绑定HTML标签以后，这个标签代表的就是当前vm对象的可控范围，可以通过vm.$el属性来查询，

通过要获取绑定vm的HTML元素，可以通过vm.$el.parentElement来获取。

vm对象提供$refs可以让我们开发者直接在vm控制的视图范围，使用ref属性绑定任意元素，并在vm.$refs中获取。

vm.$refs.p3 则表示获取视图代码中的 ref="p3"的标签。

显示数据

在双标签中显示纯文本数据一般通过{{ }}来完成数据显示，双花括号中还可以支持js表达式和符合js语法的代码，例如函数调用.

如果双标签的内容要显示的数据包含html代码，则使用v-html来完成

在表单输入框中显示数据要使用v-model来完成数据显示

整个HTML网页组织起来就是DOM树形结构，那么vue在视图模板的时候，采用了虚拟DOM方式来展示数据的

Title

{{num}}

{{num+200}}

{{(3.3333333+1).toFixed(2)}}

{{parseInt(num+3.3333333)}}

{{Math.random()}}

{{num}}




总结：

1. 可以在普通双标签中使用{{ }} 或者 v-html 来输出data里面的数据

{{message}}

2. 可以在表单标签中使用v-model属性来输出data里面的数据，同时还可以修改data里面的数据

翻译

搜索

复制