【无标题】Vue.js开发总结

2201_75473925

已于 2024-01-02 21:41:27 修改

阅读量1.5k

点赞数 39

文章标签： vue.js 前端 javascript

于 2024-01-02 11:04:51 首次发布

本文链接：https://blog.csdn.net/2201_75473925/article/details/135335575

版权

1、什么是Vue.js

1、Vue.js（读音 /vju/, 类似于 view）是一套构建用户界面的渐进式框架。 2、Vue 只关注视图层，采用自底向上增量开发的设计。 3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

两个核心：

（1）响应式数据绑定当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。（2）组合的视图组件即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。

虚拟DOM：

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

MVVM

MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 M：Model（数据层，也就是指数据（前端是js）） V：View ( 视图部分，也就是指DOM层或用户界面 ) VM ： ViewModel (处理数据和界面的中间层，也就是指Vue)

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

2、简单的实例

Vue 2.0 Hello World

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'nihao'
}
})
</script>
</body>
</html>

一，先安装node.js

（一）先从nodejs官网下载node.js。下载地址：Download | Node.js

1、根据自己的电脑系统和电脑位数选择下载的软件。双击运行。选择【Next】，然后继续下一步。

2、勾选I accept the terms in the License Agreement，点Next 。

3、这里建议更改为自己想要的的安装目录。然后点next（这里是提前建好的一个目录：就比如E盘E:\Node\nodejs\）。

4、然后安装到这一步的时候有五组选项，就是安装的时候会安装一些组件和npm，同时会添加环境变量，具体点击每一个的时候右侧有说明。我们直接点next，进行下一步。

5、这里我们选择不用勾选，直接点next，进行下一步。

6、 Finish安装成功

4.成功安装检测

【Win+R】打开cmd

输入如下指令查看版本号

node -v

输入如下指令查看npm版本号

npm -v

这样全部显示出来了版本号码就说明是安装成功了。

（2）安装vue

我们采用npm的方式安装。因此，在使用npm之前先将安装npm。nodeJS中包含npm，所以我们此前直接安装nodeJS

1 npm install vue

（2）引入vue

（3）基本使用

let vm = new Vue({

//el通过指定id来绑定页面中的dom元素

el:'#app'

// 数据属性data可以是对象形式也可以是函数形式，一般采用函数形式。用数据来驱动视图，在视图层使用的格式为{{数据属性名}}

data:function() {

msg:'加油哦',

isTrue: 1==1,

str:'hello vue'

// 注入局部组件，只有注入了才能使用，假设App是我们已经定义好的局部组件

components:{

App

// 使用局部组件，要避免才坑点的是 template中包含的内容不是用引号包含，而是用`...`。而且一旦template中存在内容则会覆盖掉id='app'的div中编写的内容

template:`

<App/>

//定义函数

methods:{

changeHandler:function() {

}

//侦听数据属性

watch:{

msg:function(newV,oldV) {

}

//定义过滤器

filters:{

//该过滤器的作用是给数据添加美元符$

addOtherToNum: function(value) {

return '$' + value

}

})

//暴露出vm下的属性和方法

console.log(vm)

//调用vm对象下的属性和方法时需添加$，而data下具体的数据则无需

console.log(vm.$el)

console.log(vm.$data)

console.log(vm.msg)

（三）:

1.v-text指令会覆盖元素内默认的值。

{{}}文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<span>Message: {{ msg }}</span>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 data中的msg 属性更改时它也会同步更新

2.v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需使用 v-html 指令

<p>姓名：{{username}}</p>

<p>性别：{{gender}}</p>

</div>

const vm = new Vue({

el: '#app',

data: {

username: 'zs',

gender: '男',

desc: '<i style="color:red;">abc<i>'

}

})

</script>

3.v-bind 指令（

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令，（简写为英文的 : 或者当使用 .prop 修饰符为 . )

v-bind 动态的绑定一个或多个 attribute，也可以是组件的 prop。

动态绑定Class值与 Style 样式

vue 允许开发者通过 v-bind 属性绑定指令，为元素动态绑定 class 属性的值和行内的 style 样式。

可以通过三元表达式，动态的为元素绑定 class 的类名。

如果元素需要动态绑定多个 class 的类名，也可以使用数组的语法格式；如果使用数组语法动态绑定 class 导致模板结构臃肿，那么此时可以使用对象语法进行简化。

可以使用:style {}的语法来给style动态绑定样式。

<div>

//数组方式

<h3 class="thin" :class="isItalic ? 'italic' : ''">MyStyle 组件</h3>

<h3 class="thin" :class="[isItalic ? 'italic' : '', isDelete ? 'delete' : '']">MyStyle 组件</h3>

<button @click="isItalic = !isItalic">Toggle Italic</button>

<button @click="isDelete = !isDelete">Toggle Delete</button>

//对象方式

<h3 class="thin" :class="classObj">MyStyle 组件</h3>

<button @click="classObj.italic = !classObj.italic">Toggle Italic</button>

<button @click="classObj.delete = !classObj.delete">Toggle Delete</button>

<hr />

</div>

</template>

export default {

data() {

return {

// 字体是否倾斜

isItalic: false,

// 是否应用删除效果

isDelete: false,

//绑定的对象

classObj: {

italic: false,

delete: false,

// 改变的文本颜色

active: 'red',

// 文字的大小

fsize: 30,

// 背景颜色

bgcolor: 'pink',

}

</script>

// 字体变细

.thin {

font-weight: 200;

}

// 倾斜字体

.italic {

font-style: italic;

}

.delete {

text-decoration: line-through;

}

</style>

事件绑定指令

4.v-on 事件绑定

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。（简写为英文的 @ ）

注意：原生 DOM 对象有 onclick 、 oninput 、 onkeyup 等原生事件，替换为 vue 的事件绑定形式后，

分别为： v-on:click 、 v-on:input 、 v-on:keyup

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明

<h3>count 的值为：{{count}}</h3>

</div>

const vm = new Vue({

el: '#app',

// 数据源

data: {

// 计数器的值

methods: {

// 点击按钮，让 count 自增 +1

addCount() {

this.count += 1

})

</script>

5.事件对象 event

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件对象 event。同理，在 v-on 指令所绑定的事件处理函数中，同样可以接收到事件对象 event 。

绑定事件并传参

在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参。

$event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event 。$event 可以解决事件参数对象 event 被覆盖的问题。

如：event被第一个参数2，覆盖掉了，那么要获取 event 对象则可以使用 $event 来传递。

<h3>count 的值为：{{count}}</h3>

</div>

// 创建 VM 实例对象

const vm = new Vue({

// 指定当前 VM 要控制的区域

el: '#app',

// 数据源

data: {

// 计数器的值

methods: {

addCount(step, e) {

const bgColor = e.target.style.backgroundColor

// e的.target属性获取事件目标当前是获取button按钮看按钮背景颜色是否为红色是则去掉，否则添加

e.target.style.backgroundColor = bgColor === 'red' ? '' : 'red'

this.count += step

})

</script>

事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。

Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

6.stop 阻止事件冒泡

.prevent 阻止默认行为（如：阻止a连接的跳转，表单的提交等等）

.self 只监听触发该元素的事件（只有event.target是自身时才会触发事件处理函数）

.capture 以捕获模式触发当前事件处理函数

.once 绑定的事件只触发一次

.passive 一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

.left - 左键事件

.right - 右键事件

.middle - 中间滚轮事件

按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

按键别名

Vue 为一些常用的按键提供了别名：（只有键盘相关的事件才可以使用按键修饰符）

.enter

.tab

.delete (捕获“Delete”和“Backspace”两个按键)

.esc

.space 空格

.up

.down

.left

.right

系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

.ctrl

.alt

.shift

.meta 在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。

<div @click.ctrl="doSomething">Do something</div>

</div>

const vm = new Vue({

el: '#app',

data: {},

methods: {

// 获取文本框最新的值

submit(e) {

console.log('摁下了 enter 键，最新的值是：' + e.target.value)

// 清空文本框的值

clearInput(e) {

e.target.value = ''

})

</script>

鼠标按键修饰符

.left

.right

.middle

这些修饰符将处理程序限定为由特定鼠标按键触发的事件。

双向绑定指令

7.v-model 在表单输入元素或组件上创建双向绑定。

用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据

注意：v-model 指令只能配合表单元素一起使用！

仅限：

<input> 定义输入域

<select> 定义了下拉选项列表

<textarea> 定义文本域 (一个多行的输入控件)

components

<p>Message is: {{ message }}</p>

将多个复选框绑定到同一个数组或集合的值：

注：复选框和下拉列表等选中后会将value值同步到v-model所绑定的数组或集合中。

<body>

<div>Checked names: {{ checkedNames }}</div>

</div>

const vm = new Vue({

el: '#app',

data: {

checkedNames :[]

})

</script>

</body>

结果：

（checkbox没有value值选中时v-model所绑定的值会为null，select没有value值时选中绑定的值会为<option>标签里面的数据。）

注意：v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。

v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，

修饰符：

.lazy - 监听 change 事件而不是 input（添加 lazy 修饰符可以改为在每次监听到change 事件后更新数据，而不是实时更新）

.number - 将输入的合法符串转为数字（将用户的输入自动转换为数字）

如果用户输入的值无法被 parseFloat() 处理，那么将返回原始值。number 修饰符会在输入框有 type="number" 时自动启用。

.trim - 移除输入内容两端空格（默认自动去除用户输入内容中两端的空格）

条件渲染指令

这块内容只会在指令的表达式返回真值时才被渲染。

8.v-if 指令用于条件性地渲染一块内容。

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；

v-else指令为 v-if 添加一个“else 区块”。

一个 v-else元素必须跟在一个 v-if 或者v-else-if元素后面，否则它将不会被识别。

<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>

v-else-if指令提供的是相应于v-if 指令的“else if 区块”。

它可以连续多次重复使用，和v-else类似，一个使用v-else-if 的元素必须紧跟在一个v-if 指令或一个v-else-if元素后面。

9.v-show 指令可以用来按条件显示一个元素

v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；

且v-show不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

<h1 v-show="ok">Hello!</h1>

v-if 和 v-show 的区别：

实现原理不同：

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；

v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；

性能消耗不同：

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。（初始渲染开销：就是说初始为false时也会被渲染，只不过是隐藏了，而初始为false时v-if还没有被创建，那么就减少了性能消耗）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

列表渲染指令：

10. v-for 指令基于一个数组来渲染一个列表

v-for 指令需要使用 item in items 的特殊语法，其中：

items 是待循环的数组 (是源数据的数组)

item 是当前的循环项 (是迭代项的别名)

</div>

v-for 指令还支持一个可选的第二个参数，即当前项的索引。

注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。

如：为索引指定别名 (如果用在对象，则是键值)

使用：

<ul>

</ul>

</div>

const vm = new Vue({

el: '#app',

data: {

// 用户列表的数据

list: [

{ id: 1, name: 'zs' },

{ id: 2, name: 'ls' },

})

</script>

组件安装 — Vue.js

组件（component）是vue.js最核心的功能，用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)。

组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。

非单文件组件：一个文件中包含多个组件。（真正开发中几乎不用）

单文件组件：一个文件中只包含1个组件。

单文件组件由一个xxx.vue 文件的组成(3 个部分):

1.模板页面

页面模板

</template>

2. JS 模块对象

export default {

data() {return {}}, methods: {}, computed: {}, components: {}

}

</script>

3. 样式

<style>

样式定义

</style>

（2）通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据以及参数，子组件接收到参数后再根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程通过props来实现的。

父组件：vue-cli创建的项目结构中的App.vue为组件之根（父组件）

父组件示例代码（App.vue)：

<h1>这是列表页</h1>

</div>

</template>

//1.引入子组件ListItem

import ListItem from '@/components/ListItem'

export default {

data(){

return{

}

//2.注册子组件ListItem

components:{ListItem}

}

</script>

<style>

</style>

子组件（列表项目组件）接收父组件传递过来的数据，子组件列表项目代码（ListItem.vue）:

<ul>

<li>这是第一条数据</li>

</ul>

<p>{{message}}</p>

</div>

</template>

export default {

name:'ListItem',

data(){

return{

msg:'我是组件本身的数据'

}

//通过props接收父组件传递过来的数据

props:["message"]

}

</script>

.list{

color:#f00;

}

.list p{

font-weight: 700;

}

</style>

props中声明的数据与组件data函数返回的数据的主要区别：

props中声明的数据来自父级，而data中是组件自己的数据，作用域是组件本身；

这两种数据都可以在模板（template）及方法（method）中使用；

（3）使用v-bind指令动态绑定props值：

父组件示例代码（App.vue)：

<h1>这是列表页</h1>

</div>

</template>

//1.引入子组件ListItem

import ListItem from '@/components/ListItem'

export default {

data(){

return{

listdata:'原始数据'

}

methods:{

change(){

this.listdata='单击按钮之后的数据'

}

//2.注册子组件ListItem

components:{ListItem}

}

</script>

<style>

</style>

（4）三、组件通信

通过前面的学习，我们已经知道父组件与子组件通信通过props传递数据就可以，但是vue组件通信的场景远不止这一种，最容易想到的还有子组件传给父组件。组件之间传值可以用下图表示：

组件通信流程图

3.1 自定义事件及$emit方法

Vue.js允许正向传值，也就是父组件传值给子组件。正向传值不需要条件触发，是主动的，逆向传值则是不允许的，需要主动触发，需要主动抛出自定义事件

语法：

this.$emit('event',val)

$emit为实例方法，用来触发事件监听。其中，参数event代表自定义事件名称，参数val代表通过自定义事件传递的值，注意这里的val为可选参数。

示例代码：（父组件App.vue)

<p>子组件传递的数据:{{message}}</p>

</div>

</template>

//1.引入子组件ListItem

import ListItem from '@/components/ListItem'

export default {

data(){

return{

message:""

}

methods:{

getVal(val){

this.message=val

}

//2.注册子组件ListItem

components:{ListItem}

}

</script>

<style>

</style>

示例代码：（子组件ListItem.vue)

<button @click="fn()">单击子组件传值父组件</button>

</div>

</template>

export default {

name:'ListItem',

data(){

return{

cMsg:"子组件要传递给父组件的数据信息"

}

methods:{

fn(){

this.$emit("change",this.cMsg)

}

</script>

</style>

（5）什么是slot

slot的官方定义是用于组件内容分发，slot还有一个形象的名字“插槽”。简单通俗的解释就是在组件化开发中，虽然组件是一样的，但是在不同的使用场景，组件的某一部分需要有不同的内容显示。

匿名slot

匿名slot从字面理解就是没有名字的插槽，特点是可以放任何内容。

假设场景：设想一个弹出提示框的场景，提示框都包括头部、中间内容和底部内容三部分，头部和底部都是固定不变的，改变的知识中间内容，所以我们在定义组件时可以将中间内容定义为插槽。

示例代码：(子组件popup.vue)

<div>

<slot>如果没有分发内容，则显示默认提示</slot>

</div>

</template>

export default {

data(){

return{

}

</script>

<style>

</style>

示例代码：（父组件App.vue）

<popup>

<h1>显示弹出框内容</h1>

</popup>

</div>

</template>

//1.引入子组件popup

import Popup from './components/popup.vue'

export default {

data(){

return{

message:0

}

methods:{

//2.注册子组件ListItem

components:{Popup}

}

</script>

<style>

</style>

如何创建vue项目

环境准备（这里的步骤已将在‘一’那边弄好了）

二、搭建vue环境

1、卸载旧版本

卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g

1、全局安装vue-cli 3.x

这里注意：安装vue-cli对node.js的版本是有要求的

装的两种方式：输入cmd命令

npm install -g @vue/cli //这个是从国外下载的比较慢

cnpm install -g @vue/cli //这个是从镜像源下载

//指定版本号 npm install -g @vue/cli@3.12.1 不指定版本号会默认安装最新的版本

查看安装的版本（显示版本号说明安装成功）

vue --version

如果你原来有版本或者版本比较低，可以升级

npm update -g @vue/cliyarn global upgrade --latest @vue/cli

三、创建vue项目

1、创建文件

以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹

输入：vue create 项目名

2. 选择配置信息

通过上下方向键选择对应配置，然后回车

按空格键选择要安装的配置资源，带 * 号说明被选上了

3. 选择版本

上下方向键选择版本，这里我们选择vue2，然后回车

4. 路径模式选择

这里可以不用管，直接输入 no/n

5. 语法代码格式检查

代码检查，选标准的就行，方向键切换，空格键选择然后回车

代码检查时间，方向键切换，空格键选择然后回车

6. 第三方文件存在的方式

1.独立的文件 2.综合的

7. 是否保存本次配置信息（保存预设）

这里如果选择保存的话，就要输入名字，默认就是文件夹的名字，下次配置的时候就会显示这个文件配置的选项就像上面的一样，在配置的时候会多出来一个

8. 创建成功

Successfully created project vue01出现这个说明创建成功

9. 运行

cd到项目文件夹下面

cd vue01

输入代码运行文件

npm run serve

10. 启动

在浏览器输入对应的网址就可以看到界面啦
http://localhost:8080/

11. 停止服务

两下Ctrl+C 或者Ctrl+C一下然后Y

2201_75473925

关注

39
点赞
踩
26

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫