Vue介绍：vue导读1
一、什么是vue
二、如何在页面中使用vue
三、vue的挂载点
四、vue的基础指令
一、什么是vue
1.什么是vue
vue.js十一个渐进式javascript框架
渐进式：vue从控制页面中的一个变量到页面中一块内容到整个页面，最终到整个项目都可以用vue框架来实现
2.vue可以做哪些事情
将数据渲染到指定区域（数据可以是后台获取，也可以死是前台自己产生）
可以与页面完成基于数据的交互方式
3.为什么学习vue
1.整合了Angu lar 、React框架的有点（第一手API文档是中文的）
2.单页面应用（得益于vue组织化的开发 => 前台代码的复用）
3.虚拟DOM（提高DOM操作的效应）
4.数据的双向绑定
二、如何在页面中使用vue
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box1">
<!--{{}}会被vue解析为数据的渲染的指定语法-->
{{ }}
</div>
<hr>
<div class="box2">
{{ }}
</div>
</body>
<!--引入vue：将vue加载到js文件下-->
<script src="js/vue.js"></script>
<script>
//如何使用jq框架<=拿到jq框架的对象 $|jQuery
//类比：如何使用vue框架<=拿到vue框架的对象那个 new 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的挂载点
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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创建的结果，反而就不需要接受
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>
</html>
四、vue的基础指令
1.文本指令
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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>
</html>
2.属性指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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:res}]">123</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',
s1: {//样式1：值1，...,样式n：值n
width: '200px',
height: '200px',
background: 'yellow',
},
s2: {
borderRadius: '50%'
},
res: 'center' }
}); </script>
</html>
3.事件指令
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--v-on:事件="变量 简写@"-->
<!--事件绑定的变量可以在data中赋值，但建议在methods中赋值-->
<p v-on:click="fn1">111</p>
<p @click="fn2">222</p> <!--vue事件绑定可以传自定义参数-->
<p @click="fn3(33333)">333</p>
<!--vue事件绑定不传自定义参数，默认将事件对象传过去了-->
<p @click="fn4">444</p>
<!--vue事件绑定不传自定义参数，还要将事件对象传过去，要明确传$event-->
<p @click="fn1(55555,$event)">555</p> </div>
</body>
<script src='js/vue.js'> </script>
<script> new Vue({
el:'#app',
data:{
//事件在data中提供一个函数地址，可以实现事件
fn1:function () {
console.log('1111')
} },
// 以后事件尽量写在methods中
methods:{
fn2:function () {
console.log('2222')
},
fn3(arg) {
console.log('arg')
},
fn4:function (ev) {
console.log(ev)
},
fn5:function (arg,ev) {
console.log('arg')
console.log('ev')
},
}
}); </script>
</html>
4.表单指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form action="">
<!--v-model="变量"本质操作的就是表单元素的value-->
<!--v-model完成的就是双向绑定-->
<input type="text" v-model="value">
<input type="text" v-model="value">
<p>{{ value }}</p>
<!--v-once只会被赋值一次，并且结合双向绑定-->
<p v-once="value">{{ value }}</p>
</form>
</div>
</body>
<script src='js/vue.js'></script>
<script> new Vue({
el: '#app',
data: {
value: '初始的value',
// value:"",
}
}); </script>
</html>
Vue介绍：vue导读1的更多相关文章
- Vue.js是什么，vue介绍
Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- Vue学习笔记之Vue介绍
vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...
- vue——介绍和使用
一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...
- Vue介绍以及模板语法-插值
1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...
- Vue小白篇 - Vue介绍
Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
随机推荐
- Sql 中常用日期转换Convert(Datetime) convert datetime
Convert(data_type,expression[,style]) Convert(varchar(10),字段名,转换格式) 说明:此样式一般在时间类型(datetime,smalldate ...
- 嵌入(embedding)层的理解
首先,我们有一个one-hot编码的概念. 假设,我们中文,一共只有10个字...只是假设啊,那么我们用0-9就可以表示完 比如,这十个字就是“我从哪里来,要到何处去” 其分别对应“0-9”,如下: ...
- python下载一些包出现time out的问题解决
更换镜像点: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple package 将package换成自己要下载的包即可 亲测还挺快的
- 信用卡分销系统源码、分销系统定制贴牌、信用卡三级分销系统源码、信用卡返佣系统OEM
信用卡返佣分销系统贴牌,全套源码,可定制UI界面 这一整套绝对是市场上最完善最好的一套系统:里面的特色功能: 1.合伙人功能,解决你前期的资金以及资源问题 2.推广素材库,全方位增加推广效率 3.红包 ...
- beego conf配置文件
1. 多个配置文件通过include引入 自定义配置文件mysql.conf 在app.conf 中引入mysql.conf include "mysql.conf"
- 第07组 Alpha冲刺（1/4）
队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:完成人员分配,初步学习Android开发 Github签入记录 接下来的计划:继续完成Android开发的学习,带领团队进行前后端开 ...
- 《C专家编程》读书笔记之第8~11章
八.为什么程序员无法分清万圣节和圣诞节 1. 整形提升是指char,short int和位段类型(无论signed或unsigned)以及枚举类型将被提升为int或unsigned int(如果int ...
- Nginx04---编译安装
原文:https://www.cnblogs.com/zhang-shijie/p/5294162.html 一:基介绍 官网地址www.nginx.org,nginx是由1994年毕业于俄罗斯国立莫 ...
- 对JSON.parse()中存在转义字符的解决以及js中替换函数replace()的认识
在工作中,遇到对页面数据进行转存json格式数据后存储在数据库中.然而在显示数据时遇到无法显示json中的数据,产生的bug 问题抛出: 1.首先认识下,在JSON.parse()将后台传过来的字符串 ...
- 小木棒HDU1455（DFS+剪枝）
题意:HDU1455 给出n个小木棒的长度,他们是又数根长度相同的木棒剪短得来的,问没剪短之前的木棒长度最短是多少. 思路: 见代码:https://www.cnblogs.com/fqfzs/p/9 ...