[Vue入门及介绍,基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用、MVVM架构、插值表达式、文本指令、事件指令]
1)定义:javascript渐进式框架
渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目
文档:https://cn.vuejs.org/v2/guide/
版本
- 1.X:使用得较少
- 2.X:普遍使用
- 3.X:刚出没多久,只有Beta版
2)优势:
有指令(分支结构,循环结构...),复用页面结构等
有实例成员(过滤器,监听),可以对渲染的数据做二次格式化
有组件(模块的复用或组合),快速搭建页面
虚拟DOM
数据的双向绑定
单页面应用
数据驱动
3)为什么学习vue:
前台框架:Angular(庞大)、React(精通移动端)、Vue(吸取前两者优势,轻量级)
Vue一手文档是中文
实现前后台分离开发,节约开发成本
关于编辑器的选择
'''
1 ide:
python--->pycharm,vscode(免费),juptyer (anaconda)
go------->goland,vscode(免费)
java----->IDEA , myeclipse,eclipse
前端----->webstorm,sublinetext,Hbuilder(nui-app),vscode,pycharm:vue插件
php------>phpstrom
c/c++---->clion
安卓开发---->androidstadio---->谷歌公司买了授权+adt
2 捷克的jetbrains公司出的,后期不管做什么语言,简易都用他家的
'''
MVVM架构
MVVM介绍
1 M(数据层)----V(页面展示)----VM(vm)
2 双向数据绑定:JS中变量变了,HTML中数据也跟着改变
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,是一种事件驱动编程方式
Model :vue对象的data属性里面的数据,这里的数据要显示到页面中
View :vue中数据要显示的HTML页面,在vue中,也称之为“视图模板” (HTML+CSS)
ViewModel:vue中编写代码时的vm对象,它是vue.js的核心,负责连接 View 和 Model数据的中转,保证视图和数据的一致性,所以前面代码中,
data里面的数据被显示中p标签中就是vm对象自动完成的(双向数据绑定:JS中变量变了,HTML中数据也跟着改变)
---------------------------------------------------------------------------------
M-V-VM思想:数据的双向绑定(*****)
Model :vue对象的data属性里面的数据,这里的数据要显示到页面中
View :vue中数据要显示的HTML页面,在vue中,也称之为“视图模板” (HTML+CSS)
ViewModel:vue中编写代码时的vm对象,它是vue.js的核心,负责连接 View 和 Model数据的中转,保证视图和数据的一致性,所以前面代码中,data里面的数据被显示中p标签中就是vm对象自动完成的(双向数据绑定:JS中变量变了,HTML中数据也跟着改变)
MVVM的特性
- 低耦合:
视图
(View)可以独立于Model变化和修改
,1个ViewModel可以绑定到不同的View上,当View变化的时候 Model可以不变,当Model变化的时候 View也可以不变 - 可复用:可以把一些视图逻辑放在1个ViewModel中,让很多View
重用这端视图的逻辑
(以此减少代码冗余) - 独立开发:
开发
人员可以专注于业务逻辑
和数据的开发
(ViewModel),设计
人员可以专注于页面设计
- 可测试:界面元素是比较难以测试的,而现在的测试可以
针对ViewModel
来编写
单页面开发和组件化开发
组件化开发:
类似于DTL中的include,每一个组件的内容都可以被替换和复用
单页面开发:
只需要1个页面,结合组件化开发来替换页面中的内容
页面的切换只是组件的替换,页面还是只有1个index.html
Vue环境简单搭建:通过script标签导入vue文件即可
"""
1)cdn
<script src="https://cn.vuejs.org/js/vue.js"></script>
2)本地导入
<script src="js/vue.js"></script>
"""
挂载点el
"""
/** el: 挂载点
* 1)一个挂载点只能控制一个页面结构(优先匹配到的结构)
* 2)挂载点挂载的页面标签严格建议用id属性进行匹配(一般习惯用app)
* 3)html标签与body标签不能作为挂载点(html和body标签不可以被替换,组件中详细介绍)
* 4)是否接受vue对象,是外界是否要只有vue对象的内容决定的
*/
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="d1">
</div>
</body>
<script>
var vm = new Vue({
el:'#d1', # 将id为d1的div 挂载
})
</script>
</html>
插值表达式 模板语法
"""
/** 插值表达式
* 1)空插值表达式:{{ }}
* 2)中渲染的变量在data中可以初始化
* 3)插值表达式可以进行简单运算与简单逻辑
* 4)插值表达式符合冲突解决,用delimiters自定义(了解)
*/
"""
<div id="app">
<p>{{ info }}</p>
<p>{{ msg }}</p>
<p>{{ }}</p>
<p>{{num}}</p>
<p>{{num + 10 * 2}}</p> # 可做运算
<p>{{ msg.length + num }}</p>
<p>{{ msg[4] }}</p> # 可索引取值
<p>{{ msg.split('')[4] }}</p> # 可按指定字符切分,切分后去索引4
<p>[{ num }]</p>
<input type="text" v-model="name">
</div>
<script>
// 实例化得到一个vue对象,传入一些参数,
var vm = new Vue({
el: '#app', # el挂载
data: {
info: '信息',
msg: 'message',
num: 10,
name: 'dsb'
},
// 控制vue插值表达式符合
delimiters: ['[{', '}]'],
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值语法:放js变量或语法</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>
名字:{{name}}
</p>
<p>
数组:{{t}}
</p>
<p>
数组的第一个值:{{t[1]}}
</p>
<p>
对象:{{obj}}
</p>
<p>
对象取值:{{obj.name}}
</p>
<p>
s字符串:{{s}}
</p>
条件?值:值
<p>三目运算符: {{100>20?'是':'否'}}</p>
</div>
</body>
<script>
var a =10>20?'是':'否'
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
t: ['张三', '李四', 1],
obj: {name: 'lqz', age: 19},
s: '<a href="http://www.baidu.com">点我看美女</a>'
}
})
</script>
</html>
指令之文本指令
v-html 让HTML字符串渲染成标题
v-text 标签内容显示js变量对应的值
v-show 放1个布尔值:为真 标签就显示;为假 标签就不显示
v-if 放1个布尔值:为真 标签就显示;为假 标签就不显示
"""
/**
* 1) v-* 是vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义)
* 2)v-text是原样输出渲染内容,渲染控制的标签自身内容会被替换掉(<p v-text="num">123</p>会被num替换)
* 3)v-html可以解析渲染html语法的内容
*/
v-show 放1个布尔值:为真 标签就显示;为假 标签就不显示
v-if 放1个布尔值:为真 标签就显示;为假 标签就不显示
v-show与 v-if的区别:
v-show:标签还在,只是不显示了(display: none)
v-if:直接操作DOM,删除/插入 标签
4)补充
<!-- js基本数据类型:字符串、数字、布尔、undefined -->
<p v-text="'abc' + num + 10"></p>
<p>{{ 'abc' + num + 10 }}</p>
"""
<body>
<div id="app">
<p>{{ num | add(300) }}</p>
<p v-text="num"></p>
<p v-text="num">123</p>
<p v-text="info"></p>
<p v-html="info"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100,
info: '<i style="color: red">info内容</i>'
},
filters: {
add: function (a, b) {
return a + b;
}
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本指令</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-html="s"></div>
<hr>
<p v-text="name"></p>
<span>{{name}}</span>
<hr>
<!-- <div v-show="false">我是个div</div>-->
<div v-show="show">我是个div--v-show</div>
<hr>
<div v-if="show">我是个div--v-if</div>
<hr>
<h1>通过点击按钮实现div显示与不显示</h1>
<button @click="handleClick">点我显示/不显示</button>
<h1 v-show="show_h1">我是一个h1标题</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
s: '<a href="http://www.baidu.com">点我看美女</a>',
show:true,
show_h1:true
},
methods:{
handleClick(){
// alert('11111')
// this.$data.show_h1=false
this.show_h1=!this.show_h1
},
}
})
</script>
</html>
指令之事件指令
v-on:事件 触发事件(不推荐)
@事件 触发事件(推荐) 与↑ 效果一样
@[event] 触发event事件(可以是其他任意事件)
"""
/**
* 一、数据驱动
* 1)操作是一个功能,使用需要一个方法来控制
2)方法名是变量,所以控制变量就可以控制该方法
*
*
* 二、事件指令
* 1)在实例成员methods中声明事件方法
* 2)标签通过事件指令绑定声明的方法: v-on:事件名="事件方法名"
* eg: <button v-on:click="btnClick">按钮</button>
* 3)标签通过事件指令绑定声明的方法,且自定义传参: v-on:事件名="事件方法名()"
* eg: <button v-on:click="btnClick()">按钮</button> 不传任何参数
* eg: <button v-on:click="btnClick($event)">按钮</button> 传入事件对象,同不写()
* eg: <button v-on:click="btnClick(10)">按钮</button> 只传入自定义参数,当然也可以传入事件对象
*/
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-html="link"></h1>
<h1 v-text="name"></h1>
<h1 v-text="link"></h1>
<h1></h1>
<button @click="handleClick">若隐若现</button>
# @click="handleClick" 与 v-on:click="handleClick" 一样
<div v-show="show">
<h2>我只要你一滴泪的时间,听你形容他狠心的脸</h2>
</div>
<button @click="handle1">点我</button>
<div v-if="if_show">
<h2>那些快乐的梦都变丑了,你看不见吗</h2>
</div>
<div></div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
name: 'geng',
link: '<a href="http://www.baidu.com">点我</a>',
show: true,
if_show: true
},
methods: {
handleClick() {
this.show = !this.show
},
handle1() {
this.if_show = !this.if_show
}
}
})
</script>
</html>
[Vue入门及介绍,基础使用、MVVM架构、插值表达式、文本指令、事件指令]的更多相关文章
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Vue学习之路第三篇:插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- Vue框架的介绍及使用
Vue框架 定义:渐进式 JavaScript 框架 渐进式:可以控制一个页面的一个标签,可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目. 通过对框架的了解与运用程度,来决定其在整个 ...
- 【入门篇】前端框架Vue.js知识介绍
一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...
- ReactiveCocoa常见操作方法介绍/MVVM架构思想
1.ReactiveCocoa常见操作方法介绍. 1.1 ReactiveCocoa操作须知 所有的信号(RACSignal)都可以进行操作处理,因为所有操作方法都定义在RACStream.h中, ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- WPF自学入门(十一)WPF MVVM模式Command命令 WPF自学入门(十)WPF MVVM简单介绍
WPF自学入门(十一)WPF MVVM模式Command命令 在WPF自学入门(十)WPF MVVM简单介绍中的示例似乎运行起来没有什么问题,也可以进行更新.但是这并不是我们使用MVVM的正确方式 ...
- WPF自学入门(十)WPF MVVM简单介绍
前面文章中,我们已经知道,WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI. 我们不管 ...
随机推荐
- 收购公司、孵化(产品)和被收购的20个短篇故事-BI产品的历史
原文地址: 20 short tales of acquiring companies, incubating (ideas into products) and being acquired. | ...
- 四:net core(.NET 6)使用Filter过滤器拦截webapi方法
Filter的基本用法 代码在最下方 使用filter过滤器,来实现拦截接口信息.咱们先新建一个项目,在原有的webapi上面,选择添加项目,添加一个类库项目: 我起个名字,就叫 Wsk.Core.F ...
- Runtime PM 处理不当导致的 external abort on non-linefetch 案例分享
硬件平台:某ARM SoC 软件平台:Linux 1 Runtime PM 简介 在介绍 Runtime PM 之前,不妨先看看传统的电源管理.传统的电源管理机制,称之为 System PM(Syst ...
- openresty 学习笔记一:环境安装
openresty 学习笔记一:环境安装 openresty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭 ...
- 201871030136-颜静 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告
项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/2018CST/ 这个作业要求链接 https://www.cnblogs.com/nwnu- ...
- FinFET与2nm晶圆工艺壁垒
FinFET与2nm晶圆工艺壁垒 谈到半导体工艺尺寸的时候,通常对于下面的一串数字耳熟能详:3um.2um.1.5um.1um.0.8um.0.5um.0.35um.0.25um.0.18um.0.1 ...
- .NET平台系列18 .NET5的超强优势
系列目录 [已更新最新开发文章,点击查看详细] 支持所有 .NET 应用程序类型 .NET5 统一版本之后将支持所有 .NET 应用程序类型:Xamarin.ASP.NET.IoT 和桌面.此 ...
- Floyd最短路及路径输出
引例 下图表示城市之间的交通路网,线段上的数字表示费用.如图,求$V_{1}$→$V_{n}$最短路径长度及路径 样例数据 输入 10 0 2 5 1 0 0 0 0 0 0 0 0 0 0 12 1 ...
- JVM调优的反思与总结
垃圾回收的悖论 所谓"成也萧何败萧何".Java的垃圾回收确实带来了很多好处,为开发带来了便利.但是在一些高性能.高并发的情况下,垃圾回收确成为了制约Java应用的瓶颈.目前JDK ...
- 【题解】Luogu P1011 车站
题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下车的人数相同,因此在第2站开出时(即在到达第3站之前)车上的人数保持为a人.从第3站起( ...