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 ...
随机推荐
- css 使元素居中
css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...
- vue-cli创建第一个项目（用git bash解决上下键移动选择问题）
我电脑是windows:(nodejs已经有了) 1 下载vue-cli cmd 打开命令行,或者是gitbash.最好是用cnpm比较快. 2 创建项目: dos命令,cd 你的希望创建的文件夹 ...
- Docker win10安装
因为虚拟机还没装好,所以现在win10上安装Docker 1.首先下载Docker Toolbox,因为Docker for windows需要win10专业版或者其他64位版本,我的系统虽然也是wi ...
- MySQL数据库（增删查改）
创建一个表:create table user( uid varchar(10) , pwd int(10) ); 学生表: create table student( sno varchar(20) ...
- Oracle课程档案，第二天
salary:工资 order by:排序 desc:降序 hire:雇佣 单行函数 一周有七天 一月不一定只有30天 trunc:截取 dual:空表 last:最后 month:月份 round: ...
- sql数据库光标变成黑快怎么回事？
可能是因为你按到了insert键啦,你再按一下insert键应该就可以啦. 光标变成块状说明当前是覆盖模式.光标变成竖条状说明当前是插入模式.
- Java 8 Stream API说明
Java 8增加了很多强大的功能,流(stream)就是其中之一.现在对api的使用做个说明: map 对流中的元素做转换,目前jdk提供了mapToInt,mapToLong,mapToDouble ...
- MVEAN_day05 Nexus私服对的搭建
序言:为什么要搭建私服 因为在公司中我们是以团队进行开发的,不在是在自己的本地仓库中进行,我们需要连接公司远程仓库进行jar依赖.在公司的局域网中搭建的私服,然后开发人员连接这台计算机,进行团队开发. ...
- python基础(15)-socket网络编程&socketserver
socket 参数及方法说明 初始化参数 sk = socket.socket(参数1,参数2,参数3) 参数1:地址簇 socket.AF_INET IPv4(默认) socket.AF_INET6 ...
- WIN7虚拟桌面创建（多屏幕多桌面）
Windows7/WIN7虚拟桌面怎么用怎么创建多桌面(摘录) 在使用电脑中经常会遇到桌面软件太多了不够用的感慨,那么要是一台电脑有多个桌面就好了.在windows10中自带已经支持了虚拟桌面,在wi ...