vue.js

最新推荐文章于 2024-06-12 08:41:10 发布

guyuefangyuanda

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量364

点赞数 11

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/guyuefangyuanda/article/details/135279100

版权

前言:
我之前没有接触过任何前端知识,连基本的HTML语法,css,js的基础知识都不懂,再刚接手vue的时候也是一个头两个大.
然后当然先查vue官方文档,官网会有如下提示:

然后如果你按照提示开始按部就班的看html,css,js然后再回来学习Vue的话,你可能已经被OUT了(况且周期过长,着实不推荐).直接着手一个项目是进步最快的方式,何况还有度娘和Google保驾护航.

推荐vue学习文档
新手不适宜去看vue官方文档,没有详细代码直接入手根本理解不了.
推荐去看vue.js 教程 | 菜鸟教程,里面的代码很详细可以直观看到效果.

vue菜鸟教程链接

开篇–vue框架的优势:
Vue.js的优势所在:
Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点.
响应式数据绑定指的是vue.js会自动对页面中的某些数据的变化做出响应.(v-model指令可以实现数据的双向绑定)
组件化开发指的是vue.js通过组件,把一个单页应用中的各种模块拆分到一个个单独的组件(component)中,我们只要先在父级组件中写好各种组件标签,并且在组件标签中写好要传入组件的参数,然后在写好各种组件的实现,整个应用就可以完成了.

Vue.js和MVVM关系:
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 ViewModel。ViewModel负责连接 View 和 Model,保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来.
ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

开始vue.js的安装
Vue Devtools调试工具的安装:可以在谷歌浏览器安装vue Devtools工具可以更好的审查和调试Vue应用.

Vue.js 官网下载地址

根据自己的生产要求来安装对应版本.关于安装vue的方法官网给出了多种多样的方法,这里演示独立版本的安装.

我下载之后的地址：https://vuejs.org/js/vue.js

使用独立版本是直接用script标签导入url即可.Vue会被注册为一个全局变量。

第一个vue实例:
HTML内容就是一个个标签组合而成,不知道的自己查询即可.
<!DOCTYPE...>标签用来声明HTML文档的编写标准,放在最开头位置,可写可不写.
<head>和<body>是<html>中必须有的元素.
<head>里面必须有<title>标签,<meta>和<style>可选.
charset属性指定HTML文档的编码为utf-8.
<script>标签里面的url即为我下载的vue独立版本的地址.src标签指定超链接.
View 层 - Div之间的代码属于html的view层
id指定HTML的唯一属性.
{{ }} 用于输出对象属性和函数返回值.
Model 层 - JavaScript代码如下(需放在指定的HTML元素之后)
el标签为实例提供挂载元素.用来联立view层和model.
data 用于定义属性.里面的内容也即最后的运行结果.
1
2
3
4
5
6
7
8
9
10
11

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

Vue的特征
数据驱动视图
双向数据绑定
数据驱动视图
在使用了 Vue 的页面中，Vue 会监听数据的变化，从而自动重新渲染页面的结构。

- 好处：当页面所依赖的数据发生变化时，相应的页面也会重新渲染
- 注意：数据驱动视图时`单向的数据绑定`，页面数据的主动更新无法引起数据原的同步更新
1
2
入手Vue
1.想让Vue工作，首先就是创建一个Vue实例，并且要传入一个配置对象

// 先在 title 标签下引入 Vue.js 文件

// 创建Vue实例并传入配置对象
const vm = new Vue({
el:'#root', // el 是用来指定当前 Vue 实例所服务的容器
data:{ // data 中所存储的数据便是原数据，数据供 el 所指定的容器所使用
name:'syyds',
age:18
}
})
1
2
3
4
5
6
7
8
9
10
2.打造root容器：

<div id='root'>
<h1>{{ name.toUpperCase() }}</h1> 
<p>{{ age }} </p> 
</div>
1
2
3
4
root容器里的代码依旧符合html代码规范，只不过混入了一些特殊的Vue语法
root容器中的代码叫做Vue模板
一个Vue实例对应一个容器
{{ xxx }} 中的 xxx 是js表达式（注意：并不是js语句），并且 xxx 可以直接读取到 data 当中的数据
一旦数据源发生改变，那么页面中用到这个数据源的地方也会自动更新
Vue的模板语法
插值语法
功能:用于解析标签体内容
写法: {{ xxx }} xxx 是js表达式,可以直接读取到 data 中的所有属性
指令语法
功能:用于解析标签(包括:标签属性标签体内容绑定事件…)
举例: v-bind:href=‘xxx’ 或简写为 :href=‘xxx’ ,其中 xxx 同样是js表达式,并且可以直接读取到data中的所有属性
注意:Vue中有许多指令,且形式都是: v-???

<body>

<div id='root'>
<h1>插值语法: {{ name }} </h1>
<h1>指令语法: </h1>


<a v-bind:href='url' x='哇咔咔'>点我去 {{ name }} 学习!</a>
</div>
</body>
<script>
const vm = new Vue({
el:'#root',
data:{
name:'Vue 官网',
url:'https://cn.vuejs.org/'
}
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

数据绑定
数据绑定可以分为单向数据绑定和双向数据绑定

- 单向数据绑定(v-bind): 数据只能从 data 中流向页面
1
双向数据绑定(v-model): 数据不仅可以从 data 流向页面,也可以从页面流向 data
备注:1.双向数据绑定一般都应用在表单元素上(如: input select等)

2. v-model:value 可以简写为 v-model,因为 v-model默认收集的就是 value 值

<div id="root">
           
           双向数据绑定：<input type="text" v-model:value="name"><br/> -->
           
           双向数据绑定：<input type="text" v-model="name"><br/>
           
           <h2 v-model:x="name">你好啊</h2>
</div>
1
2
3
4
5
6
7
8
el 属性的两种形式
- new Vue时候配置el属性。
- 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
1
2
第一种写法
// new Vue时候配置el属性
const vm = new Vue({
el:'#root'
})
1
2
3
4
第二种写法
// 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
const vm = new Vue({
data:{
name:'hello'
}
})
vm.$mount('#root') // 来源于声名周期
1
2
3
4
5
6
7
data的两种形式
对象式
函数式
如何选择:
（1）如果涉及到组件开发，则使用函数式
(2）如果不涉及到组件开发，则使用对象式或者函数式都可以

// 对象式
const vm = new Vue({
el:'#root',
data:{
name:'hello'
}
})
1
2
3
4
5
6
7
// 函数式
const vm = new Vue({
el:'#root',
data:function () {
.....
}
})
1
2
3
4
5
6
7
data 函数式的简写形式

const vm = new Vue({
el:'#root',
data(){ // 冒号‘ ： ’与‘ function ’ 可以省略
....
}
})
1
2
3
4
5
6
MVVM模型

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分

Model:表示当前页面渲染时所依赖的数据源
View:表示当前页面所渲染的DOM结构
ViewModel: Vue实例，是MVVM的核心
MVVM的工作原理
VIewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）链接在了一起

当数据源发生变换时，会 ViewModel 监听到，VM会根据最新的数据源自动更新页面的结构

当表单元素值发生变化时，也会被VM监听到，Vm对把变化过后最新的值自动同步到Model数据源中

Object.defineproperty
let person = {
name:'Tom',
gender:'boy'
}
// define ：定义 property：属性
Object.defineproperty(需要添加属性的对象,'具体要添加的属性',{
....
})

Object.keys(person) 可以获得一个以对象属性为元素的数组，但是里面没有age，因为age不参与枚举
1
2
3
4
5
6
7
8
9
10
第一种情况
Object.defineproperty(person,'age',{
value:18
})
1
2
3
此时给person 对象添加的age属性不参与枚举（遍历）的（在控制台中 age 的颜色是淡紫色）
Object.keys(person) 可以获得一个以对象属性为元素的数组，但是里面没有age，因为age不参与枚举
如果想要 age 属性参与枚举，可以配置 enumerable 属性

Object.defineproperty(person,'age',{
value:18,
enumerable:true // 控制属性是否可以被枚举（遍历），默认值是 false
})

介绍

Vue.js是一个轻量级的JavaScript框架，用于构建用户界面。它使用一种被称为“响应式编程”或“声明式编程”的技术，在应用程序的各个部分之间建立了一种实时的、双向的数据绑定。

Vue.js是由华裔前Google工程师尤雨溪于2014年在深圳创立的开源JavaScript框架。Vue.js由MVVM（模型-视图-视图模型）架构模式驱动，使其非常适合单页面应用程序和Web端交互式应用程序。Vue.js也可以与其他库或现有项目集成。Vue.js提供了全面的指令和功能，使开发者可以轻松地创建、扩展和维护应用程序。

Vue.js的主要特点有：

简单易用：Vue.js提供了简单直观的API，并具有可预测的行为。
响应式编程：Vue.js使用双向数据绑定和单向数据流来实现实时的响应性，使应用程序更具交互性。
组件化开发：Vue.js的组件化架构使应用程序更容易扩展、维护和重构。
良好的性能：Vue.js使用虚拟DOM和异步渲染等技术提高应用程序的性能。
在本文中，我们将讨论Vue.js的基础知识，包括Vue.js的实例、指令、数据绑定、事件处理和组件化开发等。我们还将提供一个简单的Vue.js应用程序作为示例。

Vue.js实例

一个Vue.js应用程序是由Vue.js实例构成的。Vue.js实例是一个绑定了HTML DOM元素的JavaScript对象。通过Vue.js实例，我们可以在HTML中绑定数据、事件处理程序和其他用户界面元素。

创建Vue.js实例需要调用Vue构造函数，并传递一个选项对象。Vue.js实例的选项对象包括以下几个属性：

el：指定Vue.js实例绑定的HTML DOM元素
data：指定Vue.js实例绑定的数据
methods：指定Vue.js实例中的事件处理程序
Vue.js实例的创建方式示例：

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js实例示例</title>
</head>
<body>
<div id="app">
{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>

guyuefangyuanda

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
vue.js

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。组件化开发指的是vue.js通过组件,把一个单页应用中的各种模块拆分到一个个单独的组件(component)中,我们只要先在父级组件中写好各种组件标签,并且在组件标签中写好要传入组件的参数,然后在写好各种组件的实现,整个应用就可以完成了.
复制链接

扫一扫

vue.js

“相关推荐”对你有帮助么？