Vue的介绍及基础指令
一、什么是Vue
Vue.js是一个渐进式 JavaScript 框架
通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目
为什么要学习Vue
三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发
特点
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
如何使用Vue
- 开发版本：vue.js
- 生产版本：vue.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用vue</title>
</head>
<body>
<div id="box1">
{{ }}
</div>
<hr>
<div class="box2">
{{ }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
/*
拿到jquery框架的对象 ($ | jQuery) ===> 使用jquery框架
拿到vue框架的对象 ( new Vue() ) ===> 使用vue框架
*/
// vue对象需要手动创建, 原因是一个vue对象可以只控制页面中的某一部分, 如果一个页面有多个部分都需要被控制, 那么就需要创建多个vue对象
/*
vue对象如何与控制的页面进行绑定关联
采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域)
*/
new Vue({
el: "#box1"
// 挂载在id为box1的div上, 那么该div下的所有内容都由该vue对象来控制
});
new Vue({
el: '.box2'
// 挂载在class为box2的div上, 那么该div下的所有内容都由该vue对象来控制 (尽量使用id, 唯一标识)
})
</script>
</html>
Vue的挂载点（vue实例）
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// Vue实例会根据数据产生虚拟DOM,最终替换掉挂载点的真实DOM(不要挂在到body上)
var app = new Vue({
el: '#app',
data: {
msg: "开启vue学习之路"
}
});
// 如果需要使用vue对象(实例), 那么就可以接受Vue创建的结果, 反之就不需要接收
console.log(app);
console.log(app.$attrs); // vue实例的变量都是以$开头
console.log(app.$el);
console.log(app.$data.msg);
console.log(app.msg);
// app对象 = new Vue()实例 = 标签div#app组件
</script>
vue的基础指令
- 文本指令
<body>
<div id="app">
<p>{{ info }}</p>
<!-- v-text 为vue的文本指令 ="info" , info为vue实例data中的一个变量 -->
<p v-text="info"></p>
<p v-text="msg"></p>
<p v-html="res"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
info: "插值表达式",
msg: "文本指令",
res: "<b>加粗的文本</b>"
}
})
</script>
- 属性指令
<body>
<div id="app">
<!-- v-bind:属性 = "变量" -->
<!-- 如果abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 如果就想是普通字符串, 再用''包裹 -->
<!-- : 就是 v-bind: 的简写方式 (1.常用 2.一定且只操作属性)-->
<p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p>
<!--最常用的两个属性 class | style-->
<!--class-->
<p :class="a"></p> <!-- 单类名 -->
<p :class="[a, b]"></p> <!-- 多类名 -->
<p :class="{c: d}"></p> <!-- 了解: c为类名,是否起作用取决于d值为true|false 开关类名 -->
<!--style-->
<p :style="s1"></p> <!-- s1为一套样式 -->
<p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") -->
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
h_info: "悬浮提示",
hehe: "呵呵",
a: 'active',
b: 'rule',
d: false,
s1: { // 样式1: 值1, ..., 样式n: 值n
width: '200px',
height: '200px',
background: 'red'
},
s2: {
borderRadius: '50%'
},
ta: 'center'
}
})
</script>
- 事件指令
<body>
<div id="app">
<!-- v-on:事件 = "变量 简写 @ -->
<!-- 事件绑定的变量可以在data中赋值,但建议在methods中赋值 -->
<p v-on:click="fn1">11111111111111</p>
<p @click="fn2">22222222222222</p>
<!--vue事件的绑定可以传自定义参数-->
<p @click="fn3(333)">3333333333333333</p>
<!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了-->
<p @click="fn4">4444444444444444</p>
<!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event-->
<p @click="fn5(555, $event)">5555555555555555</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// 事件在data中提供一个函数地址,可以实现事件
fn1: function () {
console.log("11111111111111")
}
},
// 事件尽量(要求)都放在vue实例的methods中
methods: {
fn2: function () {
console.log("22222222222222")
},
fn3 (arg) { // ES6语法
console.log(arg)
},
fn4: function (ev) {
console.log(ev)
},
fn5: function (arg, ev) {
console.log(arg)
console.log(ev)
},
}
})
</script>
- 表单指令
<body>
<div id="app">
<!-- v-model = "变量" 本质操作的就是表单元素的value -->
<!--v-model就是完成数据的双向绑定-->
<form action="">
<input type="text" v-model="info"> <!-- info变量就是代表输入框的value -->
<input type="text" v-model="info">
</form>
<p> {{ info }} </p>
<!--v-once只会被赋值一次,就不再改变,并且要结合插值表达式使用-->
<p v-once="info">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// info: "初始value",
info: ""
},
})
</script>
Vue的介绍及基础指令的更多相关文章
- vue学前班004（基础指令与使用技巧）
我学vue 的最终目的是为了 做apicloud 和vue 的开发 作为配合apicloud的前端框架使用 所以项目用不到的会暂时不介绍. (强烈建议 官网案例走一遍) 基础指令的学习(结合aui ...
- vue.js介绍，常用指令，事件，以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
- Vue.js框架的基础指令
Vue.js 渐进式 javascript 框架,可以独立完成前后端分离式web项目的javascript框架 js是页面脚本语言,用来控制或是辅助页面搭建,vue是js功能的集合体. 三大主流前端框 ...
- vue.js_02_vue.js的基础指令
1.v-cloak 作用:解决插值表达式闪烁的问题 当网速过慢时,或者加载数据时间过长时,网页会出现 {{msg}} 的现象 使用方法: <!--缺陷需要写style样式--> < ...
- [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- Vue 2.0入门基础知识之内部指令
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
- 0807 创建vue实例以及vue的基础指令
lession1 1.Vue的了解 渐进式框架 作者:尤雨溪 mvvm 2.创建vue实例 引入<script src="vue.js"><scr ...
- Vue.js介绍
http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...
- Vue.js学习（常用指令）
Vue.js的指令是以v-开头,它们用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性. 本文参考:htt ...
随机推荐
- 关于 systemctl --user status 报错的问题
关于 systemctl --user enable mpd 报错: Failed to connect to bus: No such file or directory 因为arch脚本中,sys ...
- thinkphp 百度地图Api坐标计算 A坐标距离B坐标多少公里 并按照距离近的排序 坐标排序 外部字段排序
感谢我磊哥 函数封装方法: //计算距离 /* **$a 可多数坐标 就是可数组类型的 ***$b 是登录者的坐标 ***ps: lat经度 lng纬度 经度在前纬度在后 *** ***/ funct ...
- Luogu 1071 - 潜伏者 - [字符串]
题目链接:https://www.luogu.org/problemnew/show/P1071 题解: 模拟就完事儿了. 注意failed的情况有:出现一个 $f[x]$ 对应多个值:存在两个不同的 ...
- CentOS中service命令与/etc/init.d的关系以及centos7的变化
缘由 由于个人经常在ubuntu和centos 系统中切换,习惯了以前的 ubuntu中 通过 /etc/init.d/xxx 进行软件服务控制.后来发现centos7中换了服务的控制方式:servi ...
- Hibernate 补充 ManyToOne、OneToMany、OneToOne的使用例
1.前言 Hibernate 为程序员提供一种级联操作,在编写程序时,通过 Hibernate 的级联功能可以很方便的操作数据库的主从表的数据, 我们最常用的级联是级联保存和级联删除. ...
- 在Windows上搭建Git Server
Git在版本控制方面,相比与SVN有更多的灵活性,对于开源的项目,我们可以托管到Github上面,非常方便,但是闭源的项目就会收取昂贵的费用. 那么私有项目,如何用Git进行代码版本控制呢?我们可以自 ...
- 10个有趣的Python教程，附视频讲解+练手项目。
从前的日色变得慢,车.马.邮件都慢 一生只够爱一门编程语言 从前的教程也好看,画面精美有样子 你看了,立马就懂了 Python最性感的地方,就在于它的趣味性和前沿性,学习Python,你总能像科技节的 ...
- 《Java程序设计》第二周学习记录（2）
目录 3.1 运算符与表达式 3.3 if条件分支语句 3.7 for语句与数组 参考资料 3.1 运算符与表达式 和C语言基本上没有区别,要注意的是关系运算符的输出结果是bool型变量 特别要注意算 ...
- python数据结构-如何实现用户的历史记录功能
如何实现用户的历史记录功能 使用collections中的deque from collections import deque dq = deque([], 5) dq.append(1) dq.a ...
- phpstudy如何安装ssl证书
网站上面部署ssl证书的站点越来越大,但有很多集成式的web服务器无法按照一般站点的配置来部署ssl证书,现在,卓趣科技就以集成式phpstudy为例(apache+mysql),为大家展示一下正确的 ...