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]基 ...
随机推荐
- Spring Boot中报错org.apache.ibatis.binding.BindingException: Parameter 'XXXX' not found. Available parameters are [0, 1, param1, param2]的解决办法
我这里的报错信息显示: org.apache.ibatis.binding.BindingException: Parameter 'reqUsername' not found. Available ...
- Android之view的工作原理2
学习内容 View的底层工作原理,比如View的测量流程.布局流程以及绘制流程:以及常见的View回调方法:熟悉掌握前面的知识后,自定义View的时候也会更加的得心应手. 4.1 初识ViewRoot ...
- 金士顿U盘PS2251-07东芝闪存白片量产CDROM成功教程-群联量产教程-U盘量产网
之前我们发布过金士顿DT100 G3的黑片量产工具教程,因为白片的MPALL量产工具无法量产,所有版本的Phison_MPALL都爆红,最近出了新的白片MPALL V5.03.0A版本,所以试了一下结 ...
- Vue触发隐藏input file的方法
1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change ...
- edusoho 查找网址对应的控制器和模板页面
刚接触这套系统的新手都在纠结模板在哪个文件里,有时候就算告诉他,遇到其他同样的模板照样还问,授人以鱼不如授人以渔!这个文章记录下我自己的看法,大爪子忽喷! 刚看到群里有人问 xxx.com/admin ...
- 31.网络协议介绍tcp/udp
网络协议 TCP:网络中传输数据的协议,打电话 解决了我可能在网络中找不到别人(数据无法传输到) 保证数据传输的稳定性,可靠性 保证数据的安全性,完整性 对方要有响应 尝试重新发送 UDP:传输数据的 ...
- Windows 与 linux文件相互传输的方法
公司里面办公机器大部分都是 windows 但是现在随着云计算.docker.linux等的越来越兴起,需要大量的操作linux服务器. 最重要和最直接的需要将windows 上面的文件上传到 lin ...
- indows Eclipse Scala编写WordCount程序
Windows Eclipse Scala编写WordCount程序: 1)无需启动hadoop,因为我们用的是本地文件.先像原来一样,做一个普通的scala项目和Scala Object. 但这里一 ...
- 【AtCoder】AGC011
AGC011 A - Airport Bus 大意:有N个人,每个人只能在\([T_i,T_i +K]\)这段区间乘车,每辆车安排C人,问最少安排几辆车 直接扫,遇到一个没有车的在\(T_i +K\) ...
- redis单机连接池
一.配置文件 1. db.properties配置文件#IP地址 redis.ip = 127.0.0.1 #端口号 redis.port= #最大连接数 redis.max.total= #最大空闲 ...