Vue介绍
1.Vue的简介
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
- Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
官方文档：http://vuejs.org/v2/guide/syntax.html
中文文档：https://cn.vuejs.org/v2/guide/syntax.html
2.指令系统介绍
1.下载， 库引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 模板语法插值{{ }} -->
<h3>{{ msg }}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app', // 绑定根元素
data:{
msg:'2019-04-09', // 声明数据属性
}
})
</script>
</body>
</html>
结果：
2.模板语法介绍
{{ 变量 }}
{{ 1 + 1 }}
{{ 'hello' }}
{{ 函数的调用 }}
{{ 1<2 ? '真':'假'}}
3.v-text&v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 模板语法插值{{ }} -->
<h3>{{ msg }}</h3>
<!-- v-text 只渲染文本 -->
<div v-text="myTitle1"></div>
<!-- v-html 不仅能渲染文本， 还可以渲染标签 -->
<div v-html="myTitle2"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app', // 绑定根元素
data:{
msg:'2019-04-09', // 声明数据属性
myTitle1:'<span>2019</span>',
myTitle2:'<span>2019</span>',
},
})
</script>
</body>
</html>
4.v-if&v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-if="isShow"></div>
<div class="box" v-show="isShow"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
isShow:true,
}
})
</script>
</body>
</html>
效果图
将isShow改为false
总结：
v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
如果需要非常频繁地切换，用v-show，
如果在运行时条件很少改变的情况下，用v-if
5.v-for
v-for遍历数组元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">
{{ item.name }}----{{ item.age }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
items:[
{name:'Jerry', age:20},
{name:'Tom', age:20},
]
}
})
</script>
</body>
</html>
结果：
v-for 还支持一个可选的第二个参数为当前项的索引
v-for="(item, index) in items"
6.v-bind
v-bind 主要用来绑定标签上的属性
传给v-bind:class一个对象动态地切换clas
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
</div>
let vm = new Vue({
el:'#app',
data:{
isActive:true,
}
})
结果：
7.v-on 事件绑定
<div id="app">
<button v-on:click='count+=1'>加1</button>
<h2>{{ count }}</h2>
</div>
let vm = new Vue({
el:'#app',
data:{
count:0,
}
})
on—click接收一个需要调用的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 调用一个方法 -->
<button v-on:click='handlerClick'>隐藏</button>
<div class="box" v-show="isHidden">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
isHidden : true,
},
methods:{ // 方法
handlerClick(){
this.isHidden = false;
}
}
})
</script>
</body>
</html>
效果：
8.表单输入绑定v-model，双向的数据绑定
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
</head>
<body>
<form action="" id="form">
<!--<input type="text" :value="text" @input="inputHandler">-->
<!--<p>{{ text }}</p>-->
<input type="text" v-model="text">
<a href="#">{{ text }}</a>
</form>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#form',
data:{
text:'刘'
},
methods:{
inputHandler(e){
console.log(e.target.value);
this.text = e.target.value;
}
}
});
</script>
</body>
</html>
效果：
Vue介绍的更多相关文章
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Vue.js是什么，vue介绍
Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- vue——介绍和使用
一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...
- Vue学习笔记之Vue介绍
vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...
- Vue介绍以及模板语法-插值
1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...
- 02 Vue介绍与安装，指令系统 v-*、音乐播放器
VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...
- Vue小白篇 - Vue介绍
Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...
- Vue 介绍,优点,实例
一 认识vue 1.什么是vue 以数据驱动的web渐进式框架 三大主流框架: Angular React Vue 设计模式:MVVM 2.vue优点 - 以数据驱动,不直接操作DOM,效率高- 单页 ...
随机推荐
- 链表加bfs求补图联通块
https://oj.neu.edu.cn/problem/1387 给一个点数N <= 100000, 边 <= 1000000的无向图,求补图的联通块数,以及每个块包含的点数 由于点数 ...
- FCC（ES6写法） Exact Change
设计一个收银程序 checkCashRegister() ,其把购买价格(price)作为第一个参数 , 付款金额 (cash)作为第二个参数, 和收银机中零钱 (cid) 作为第三个参数. cid ...
- 安卓开发学习笔记（三）：Android Stuidio无法引用Intent来创建对象，出现cannot resolve xxx
笔者在进行安卓开发时,发现自己的代码语法完全没有问题.尤其是创建intent对象的时候,语法完全是正确的,但是Android Stuidio却显示报错,Intent类显示为红色,如图所示: 代码如下所 ...
- 2018，你与 i 春秋的故事都在这
年终岁末,深思回顾,过去的一年我们共同创造了很多回忆,有欢乐,有感动,更有收获.回首2018年,伴随着激情与挑战,我们共创了很多佳绩,一起来看看吧. 课程&实验 2018新增原创录制实战视频课 ...
- This relative module was not found:
晚上项目敲完,关机睡觉! 早上醒来-----打开项目,惊呆了 !This relative module was not found: 如图 这个报错,我当时怎么也没看懂!!! 后来经过测试 ...
- Java 子类 instanceof 父类
1.结论: 子类 instanceof 父类 == true 父类 instanceof 子类 == false 2.测试代码 @Test public void testInstanceof() { ...
- Python内置函数(8)——bytes
英文文档: class bytes([source[, encoding[, errors]]]) Return a new “bytes” object, which is an immutable ...
- 9.Django form组件
Form组件 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 创建Form类时,主要涉及到 [ ...
- 【Docker】(5)---springCloud注册中心打包Docker镜像
[Docker](5)---springCloud注册中心打包Docker镜像 上一篇文章讲了将镜像推送到远处私有仓库,然后再从私有仓库拉取该镜像的过程.而这里的镜像是直接从Docker拉取的. 所以 ...
- qt系统托盘显示、无主窗体
系统图盘是应用程序经常用到的一个控件,当应用程序需要长时间存在的时候,这个控件会变得非常有用,比如,窗口隐藏,显示,关于.关闭等接口都可以放在图盘中处理,今天与到一个问题,需求是这样的:只需要显示图盘 ...