1. 技术文章
  2. VUE

VUE

由 最后都变了- 提交于 2019-12-29 11:06:01

前端技术准备

1、前端的发展历史
静态的HTML->JS->动态网页->ajax->H5（单页面春天）->nodejs
前端三大框架

  • Vue - 轻量React
  • web端和AppAngular
  • 重量级框架 MVC
    MVVM模式
    M ： model 数据
    V ： view视图
    VM ：视图数据的双向
    Nodejs和npm的介绍
    Nodejs
    js在服务器端的运行环境，可以让前端人员使用js做服务端开发类型与jre
    Npm
    nodejs中的包管理工具，类似于java中的maven

2、安装NodeJS和Npm安装

nodejs后会自动安装npm
查看是否安装成功 node -vnpm -v
配置npm的淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后我们便可以使用cnpm代替npm
npm的使用
初始化项目
npm init -y
自动创建package.json项目的描述文件，类型与maven项目中的pom.xml
安装依赖
npm install/i 模块名称 [-S] [-g]-S
将安装的依赖信息添加到描述文件中
-g 全局安装卸载依赖npm
uninstall 模块名称列表依赖
npm ls [模块名称

**

Vue

1、 Vue是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
官网：https://cn.vuejs.org/

2、 Vue特性
 轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
 数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
 指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
 插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
 组件化/html的封装
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
3、 Vue的历史
Vue是比较新的技术，版本 1.0 是在 2014 年发布的, Vue作者是前Google 的员工尤雨溪, 在2016年9月宣布以技术顾问的身份加盟阿里巴巴。
Vue对比其他框架:https://cn.vuejs.org/v2/guide/comparison.html#ad

数据绑定
组件化
指令

四、 Vue入门
1、 Vue资源安装
1.1、 以本地js文件或cdn直接引入到页面中
Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
Vue是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
下载Vue文件到本地，官方提供两个版本：
https://cn.vuejs.org/v2/guide/installation.html
在这里插入图片描述

2、 Hello应用体验
在这里插入图片描述

吊我
五、 Vue实例对象详情 1、 Vue实例挂载(el)的标签 每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。

{{message}}

{{message}}

/*
使用构造函数创建一个vue对象：
这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
id挂载:el:"#id"
class挂载：el:".class"
*/
//id挂载方式：
var app = new Vue({
el : “#app”,
data : {
message : “我是id挂载方式”
}
});
//class挂载方式：
var app2 = new Vue({
el : “.vueClz”,
data : {
message : “我是class挂载方式”
}
});

2、 Vue中的数据(data)详解
 Vue实例的数据保存在配置属性data中, data自身也是一个对象.
 通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

{{message}}

{{user.name}},今年才:{{user.age}}岁.{{user.color}}是一个很美丽的颜色

s

//vue的数据绑定在data属性上，data本身也是一个对象
var app = new Vue({
el : “#app”,
data : {
message : “我是一个很单纯的p”,
user : {
name : “隔壁老王”,
age : 17,
color : “pink”
}
}
});
//Vue实例的数据保存在配置属性data中, data自身也是一个对象.
// 通过Vue实例直接访问data对象中的数据,及时同步的页面上
alert(app.message);
// // 通过Vue实例直接修改data对象中的数据,及时同步的页面上
app.message=“p被修改了–》pp”;
app.user.name=“老刘”;
3、 Vue中的方法(methods)详解
Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象

3.1、 使用方式
3.1.1、 直接在html模板标签中调用
{{方法名字()}}
3.1.2、 通过Vue对象实例调用方法
vue对象.方法名字();

方法的调用②直接在html模板标签中调用： {{say()}}

//vue的数据绑定在data属性上，data本身也是一个对象
//方法的定义在：methods属性上，通过json格式来表示
var app = new Vue({
el : “#app”,
data : {
message : “我是一个很单纯的p”,
user : {
name : “隔壁老文”,
age : 17,
color : “pink”
}
},
methods:{
say:function(){
//this指向当前对象，当前app对象
return “hello:”+this.user.name+"!";
},
swim:function(){
console.debug(“小狗的游泳姿势，还不错。。。”);
}
}
});
//方法调用①：通过Vue对象实例调用方法
app.swim();
4、 生命周期钩子
4.1、 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
生命周期：在这里插入图片描述

4.2、 钩子函数
例如：created代表在vue实例创建后；
我们可以在Vue中定义一个created函数，代表这个时期的构造函数：
html:

{{hello}}
js: var vm = new Vue({ el:"#app", data:{ hello: '' // hello初始化为空 }, created(){ this.hello = "hello, world！ 我出生了！"; } }) 结果： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191228222140900.png)

5、 vue数据双向绑定体验
!–页面模型–>




<script type="text/javascript">
    //创建vue是需要给他传递一个对象
    new Vue({
        el:"#myApp", //id在hmtl模板中要对应
        data:{ //数据模型
            msg:"zs"
        },
        methods:{//方法
            changeVal(){
                alert(this.msg);
            }
        }
    })
</script>

显示效果:
在这里插入图片描述

六、 Vue架构认识
Vue是一款开源的JavaScript MV*（MVVM、MVC）框架。
Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构.

1、 MVC模式：
 Model： 数据模型，一些JavaScript 对象，比如 {name : “小小强”,age : 16};
 View: 视图，网页中的内容，一般由HTML模板生成。
 Controller : 控制器（路由），视图和模型之间的胶水。

2、 MV VM模式：
 Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

 View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

 ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；在这里插入图片描述

3、 小结
View不能直接与Model交互，而是通过Vue对象这个ViewModel来实现与Model的交互。对于界面表单的交互，通过v-model指令来实现View和ViewModel的同步。对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；
对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。在这里插入图片描述

七、 VueJS表达式
不是一个完整的语句，是一部分语句，这部分语句会返回一个明确的结果
返回数值的叫做算术表达式
返回真假的叫做布尔表达式
表达式是Vue中视图模板的一种语法结构. 将数据绑定(输出)到HTML中
1、 表达式语法
 VueJS表达式写在双大括号内：{{ expression }}。
 VueJS表达式把数据绑定到 HTML。
 VueJS将在表达式书写的位置"输出"数据。
 VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。
2、 简单表达式
在{{ }}中可以进行简单的运算.

{{5+5}}

{{5+"v5"}}

{{5+"5"}}

{{"5"-"5"}}

{{5*5}}

{{"5"*"5"}}

{{5/5}}

{{5/5}}

var app = new Vue({
//挂载到id=app元素上
el:"#app"

});
3、 三目操作符
 在{{}}中的表达式可以使用data中数据
 在{{}}中的表达式可以使用三元运算符,但是不能够使用其他语句

{{ show1?"真":"假"}}

var app = new Vue({
el : “#app”,
data : {
show1 : true
}
});
4、 字符串操作
 直接使用字符串字面值作为字符串对象
 使用data中的字符串对象

{{"这是字面值"}}
{{"这是字面值".length}}
{{message.length}}
{{message.substring(1,5)}}
{{message.substring(2,6).toUpperCase()}}

var app = new Vue({
el: “#app”,
data: {
message: “这是data中的数据”
}
});
5、 对象操作
在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

{{user}}
{{JSON.stringify(user)}}
{{user.toString()}}
{{user.name}}
{{user.age}}
{{user.getAge()}}

var user = {
name: “张三”,
age: 29,
getAge: function () {
return this.age
},
toString:function(){
return “姓名:”+this.name+",年龄:"+this.age;
}
};
var app = new Vue({
el: “#app”,
data: {
user: user
}
});
6、 数组操作
在表达式中可以使用JavaScript数组中的任何语法来操作数组.

{{hobbys}}
{{hobbys[0]}}
{{hobbys.length}}
{{hobbys.toString()}}
{{hobbys.join("------")}}

var app = new Vue({
el: “#app”,
data: {
hobbys:[“打游戏”,“踢足球”,‘泡MM’,“泡GG”]
}
});

八、 Vue指令
1、 什么是指令
指令是一个带有v-前缀的标签特殊属性, 指令属性的值预期是单个JavaScript表达式.
2、 常见的指令
 v-model=“表达式” 数据双向绑定
 v-text=“表达式” 设置标签中的文本
 v-html=“表达式” 设置标签中的html
 v-if(else else if)=“表达式” 判断条件
 v-for=“表达式” 循环
 v-on=“表达式” 注册事件
3、 指令作用
 作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
 一个标签元素上可以出现多个指令属性
 指令只能够出现在Vue对象所挂载的标签范围内的标签中
4、 v-text指令
语法:
<标签名 v-text=“表达式”></标签名>

作用:
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)

注意事项:
如果值是html的值,会作为普通的文本使用。
标签中的属性值必须是data中的一个属性.



var app = new Vue({
el: “#app”,
data: {
message: “

这是一个Span!

”,
user: {
username: “lw”
},
}
});
5、 v-html指令(重点)
语法:
<标签名 v-html=“表达式”></标签名>

作用:
通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

注意事项:
如果值是html的值,不会作为普通的文本使用,要识别html标签。
{{表达式}} 可以插入的标签的内容中
v-text和v-html更改标签中的所有内容

var app = new Vue({
el: “#app”,
data: {
message: “

这是HTMl代码

”
}
});
6、 v-for指令(重点)
语法:
<标签 v-for=“元素 in 数据源”></标签>

数据源: 数组,
元素: 数组中的一个元素,

数据源: 对象
元素: 对象中的一个属性名

<标签 v-for="(元素,索引|键) in 数据源"></标签>
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键

<标签 v-for="(元素,键,索引) in 对象"></标签>

作用:
基于数据源多次循环达到多次渲染当前元素.

循环数组

  • {{hobby}}

遍历对象

  • {{value}}
<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>

var app = new Vue({
el: “#app”,
data: {
hobbys : [“爬山”,“游泳”,“打豆豆”,“睡觉”],
student : {
name: “小毛”,
age: 29,
sex: “男”,
},
num : 10,
str : “itsource”,
}
});

7、 v-for的案例-学生列表(重点)

序号 姓名 年龄 性别
{{student.id}} {{student.name}} {{student.age}} {{student.sex}}

var app = new Vue({
el: “#app”,
data: {
students: [
{id:1,name: “刘备”, age: 29, sex: “男”},
{id:2,name: “貂蝉”, age: 30, sex: “女”},
{id:3,name: “吕布”, age: 31, sex: “男”}
]
}
});
8、 v-bind指令(重点)
将data中的数据绑定到标签上,作为标签的属性.

语法:
为一个标签属性绑定一个值
<标签 v-bind:标签属性名字=“表达式”></标签>
简写形式:
<标签 :标签属性名字=“表达式”></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind=“对象”></标签>

注意事项
将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字

var app = new Vue({
el: “#app”,
data: {
imgsrc: “./img/1.jpg”,
title: “二哈!”,
props :{
type: “text”,
name: “username”,
}
}
});
9、 v-model 指令(重点)
语法:
<标签 v-model=“表达式”></标签>

在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定
注意事项:
 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
 v-model只作用于以下表单:
input select textarea

绑定到type=text的input表单元素

姓名:
data中的值:{{inputValue}}

绑定到type=checkbox的input表单元素

打篮球:
踢足球:
data中的值:{{checkboxValue}}

绑定到type=radio的input表单元素

打篮球:
踢足球:
data中的值:{{radioValue}}

绑定到textarea的元素

个人简介:
data中的值:{{textareaValue}}

绑定到单选的select的元素

技能: java php .net
data中的值:{{skills}}

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

10、 v-show指令
语法:
<标签名 v-show=“表达式”></标签名>

作用:
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为假时, 会在标签的css中添加 display: none :
注意事项:
 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
 标签的值会自动转换为boolean类型的值

你看到我了!
你看不到我了!
优秀

var app = new Vue({
el: “#app”,
data: {
“show”:true,
“hidden”:true,
“score”:90,
}
});

11、 v-if指令（重要）
语法:
<标签名 v-if=“表达式”></标签名>

作用:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

注意事项:
当表达式中的值是false时, 是从页面上删除.
标签的值会自动转换为boolean类型的值

你看到我了!
你看不到我了!
优秀

var app = new Vue({
el: “#app”,
data: {
“show”:true,
“hidden”:true,
“score”:90,
}
});
12、 v-else指令
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else></标签名>

作用:
当v-if表达式不成立时, v-else执行.

注意事项:
该指令必须也v-if搭配起来使用.
v-else是一个单独的属性, 该属性是不要赋值的.

欢迎欢迎!!
滚动!!

var app = new Vue({
el: “#app”,
data: {
isVip: true
}
});
13、 v-else-if指令
语法:
<标签名 v-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else-if=“表达式”></标签名>
<标签名 v-else></标签名>

优秀!!
良好!!
及格!!
不及格!!

var app = new Vue({
el: “#app”,
data: {
score: 80

标签
vue
前端
node
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!