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 ...
随机推荐
- 关于c++中前++后++运算符重载问题
#include<iostream> using namespace std; class Complex{ public: Complex(int a,int b){ this-> ...
- yarn卸载或增加节点
yarn卸载或增加节点 卸载节点或者增加节点: 方式一:静态的增添删除:将集群关闭,修改配置文件(etc/hadoop/slaves),重新启动集群(很黄很暴力,不够人性化). 方式二:动态的增加 ...
- Javascript实现MD5加密
/* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as d ...
- java awt 中文乱码 显示为 方块
今天调试同学的五子棋程序,同学的界面是用awt写的,运行的时候,发现菜单栏中的中文都无法正常显示,而是变为了一个个方框, 类似于这样:(图片来源于网络) 即使做了字体设置,比如设置为宋体,也还是无法正 ...
- Android无法删除项目+导入项目报错
Android无法删除项目+导入项目报错 Android无法删除项目:关闭eclipse或关闭电脑,然后重启,继续删除就可以了 导入项目报错:右键–>配置–>中就可以看到了,更改一下就可以 ...
- 大数据量下的集合过滤—Bloom Filter
算法背景 如果想判断一个元素是不是在一个集合里,一般想到的是将集合中所有元素保存起来,然后通过比较确定.链表.树.散列表(又叫哈希表,Hash table)等等数据结构都是这种思路,存储位置要么是磁盘 ...
- 《Mysql 数据类型》
一:整型 - 常用类型 类型 占用(字节) 范围 无符号范围 无符号范围 TINYINT 2的8次方 - — — SMALLINT 2的15次方 - — 6553 5 INT 2的31次方 - — 4 ...
- [svc]unix和cpu发展历史
最近搞汇编 , 有一款8086cpu,16bit, 支持内存1M 于是勾起了对计算机历史的兴趣,多了解了下 unix起源历史 [Unix发展历史 - 程序猿-贝岩博客 - CSDN博客]https:/ ...
- kafka安装步骤
kafka 安装内存会报不够 https://stackoverflow.com/questions/9350437/incompatible-initial-and-maximum-heap-siz ...
- Docker：Windows7下使用docker toolbox（1）
一.安装 官方网址:https://docs.docker.com/docker-for-windows/install/ win10以下安装:https://www.docker.com/produ ...