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]基 ...
随机推荐
- postman+jmeter接口实例
接口基础 一.为什么要单独测试接口? 1. 程序是分开开发的,前端还没有开发,后端已经开发完了,可以提前进入测试2. 接口直接返回的数据------越底层发现bug,修复成本是越低的3. 接口测试能模 ...
- Docker一
Docker 简介一 背景开发和运维之间因为环境不同而导致的矛盾集群环境下每台机器部署相同的应用DevOps(Development and Operations) 简介 Docker是一个开源的应用 ...
- 【DSP开发】DSP能用VS2010生成的链接库文件吗？
[DSP开发]DSP能用VS2010生成的链接库文件吗? 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:可能这个问题让行家看上去就会莞尔一笑,但是很多 ...
- MVC框架实例教程 【转载】
1 什么是MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller ...
- 使用请求包装器RequestWrapper 对博客内容进行编码
1.写一个文章类 代码如下 package model; public class article { private int id; private String title; private St ...
- python 创建目录文件夹
主要涉及到三个函数 1.os.path.exists(path) 判断一个目录是否存在 2.os.makedirs(path) 多层创建目录 3.os.mkdir(path) 创建目录 DEMO 直接 ...
- Reactor系列(八)concatMap有序映射
#java#reactor#comcatMap# 有序映射 视频讲解:https://www.bilibili.com/video/av79705356/ FluxMonoTestCase.java ...
- [Agc029B]Powers of two_贪心_树形dp
Powers of two 题目链接:https://atcoder.jp/contests/agc029/tasks/agc029_b 数据范围:略. 题解: 可能一点思路都没有. 但是我们发现:如 ...
- [百度贴吧]飞腾1500a .VS. 龙芯3a3000： 同频实用性能对比
贴吧关于 龙芯与飞腾的简单对比. https://tieba.baidu.com/p/5682824804?red_tag=0221728732 龙芯3a3000实用性能 ,还不如4年前发布的FT15 ...
- 将neo4j的一个节点上的关系移动到另一个节点上
将neo4j中一个节点的全部关系移动到另一个节点上面,采用先建立新关系,之后删除原先的关系的方式 def move_relations(source_node_id,target_node_id,gr ...