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]基 ...
随机推荐
- AJAX的个人见解
ajax是什么? 在学习的过程中,我虽然在学习ajax但是对ajax的具体的意义不甚了解,对此我们就来看看什么ajax吧. Ajax的全称是:AsynchronousJavaScript+XML 2. ...
- Pandas与Matplotlib结合进行可视化
前面所介绍的都是以表格的形式中展现数据, 下面将介绍Pandas与Matplotlib配合绘制出折线图, 散点图, 饼图, 柱形图, 直方图等五大基本图形. Matplotlib是python中的一个 ...
- Jetson TX2 不同的工作模式
Jetson TX2 有五种工作模式,下面介绍这几种工作模式下电压.频率以及如何启动. 原理图 几种不同的工作模式 mode mode name Denver Frequency ARM Freque ...
- python列表插入--append(), extend(), insert()
append(),extend(), insert()都是列表操作中常用的插入函数.其中前两个均接收一个参数,并插入到列表尾部.最后一个接收两个参数,将参数2插入到参数1之前. 本文主要讨论appen ...
- 最新 米哈游java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.米哈游等10家互联网公司的校招Offer,因为某些自身原因最终选择了米哈游.6.7月主要是做系统复习.项目复盘.LeetCo ...
- nginx 转发tcp连接
背景:公司有一套工作流服务(jira,confluence,bitbucket),目前jira,confluence配置的是从nginx网关进行转发,bitbucket配置的是直接解析到该主机,现在计 ...
- [Agc030B]Tree Burning_贪心
Tree Burning 题目链接:https://atcoder.jp/contests/agc030/tasks/agc030_b 数据范围:略. 题解: 开始以为是左右左右这样,发现过不去样例. ...
- 【Python】【demo实验33】【练习实例】【列表的反转】
反转列表 我的源代码: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- #按照相反的顺序输出列表的各元素 l = ["t ...
- kettle下载地址
kettle 4.4和4.2 版本是好的,版本6.6和8.2 版本有bug Kettle下载和安装: 1.官网各个版本下载地址:https://sourceforge.net/projects/pen ...
- 后台返回数据为map集合，前端js处理方法
当后台返回的数据不是json而是map集合的时候,前端js中处理就将其看作是一个数组,例如后台返回的代码入下: Map<String, String> result = new HashM ...