Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架，每天记录重要的知识点，与大家分享!有不足之处，希望大家指正。
本篇将讲述：vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
前期学习基础，使用vue.js包开发，后期实践时使用vue-cli脚手架，
可以到官网出进行下载。https://vuejs.org/js/vue.min.js，将里面代码复制，自己建一个js文件，保存下来
vue是基于MVVM框架，上图
废话不多说直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>vue 第一个示例</h3>
<div id="app">
<!-- 3.这里是view -->
{{message}}
</div>
<script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.创建 model(数据)
var exampleData = {
message:"hello vue"
};
//2.创建vue的实例(viewModel)
new Vue({
el:"#app", //挂载点 el:vue对象挂载到app元素上
data:exampleData //数据:exampleData
});
</script>
</body>
</html>
解析：(此处说法不严谨，纯属于我的白话，便于理解)
首先创建model数据，其次创建vue的实例(viewmodel)，其中el，是将vue对象挂载到相对应的app元素上，称之为挂载点，data数据绑定
在vue视图(view)部分显示数据的话,使用{{message}}，能将数据显示在浏览器中。(后期熟悉的基础上，可以将model数据部分直接写在vue对象中，后面给大家讲解)
实例02：vue的数据的双向绑定01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据的双向绑定</title>
</head>
<body>
<div id="app">
{{message}}
<hr>
<!-- v-model 将input中的value与vue对象message绑定在一起 -->
<input type="text" v-model="message" />
</div> <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var messageData={
message:"hello vue"
} new Vue({
el:"#app",
data:messageData
});
</script>
</body>
</html>
解释：
<input type="text" v-model="message" /> v-model是一条指令元素，用于数据的绑定，将input中的value绑定在一起
此处的数据是实时的，也就是说当input的值发生改变时，上面{{message}}的也将发生变化，在介绍到指令的时候，会有一个懒惰指令也就是说，
直到输入框输入完成之后，数据才会发生变化。
实例02：vue的数据的双向绑定02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 显示数据 -->
<h4>{{message}}</h4>
<!-- 在花括号中 执行运算 -->
<h4>{{3+5}}</h4>
<!-- 获取数据对象中的属性值 -->
<h4>{{car.brand}}</h4>
<!-- 三目运算 -->
<h4>{{count>totalNum?"success":"error"}}</h4>
<!-- 布尔值 -->
<h4>{{hasMore}}:{{!hasMore}}</h4>
<!-- 数据内容按照字符床格式输出 -->
<h4>{{htmllist}}</h4>
</div>
<script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var exampleData={
message:"hello vue",
htmllist:"<h6>hello vue</h6>",
count:3,
totalNum:10,
hasMore:true,
car:{
brand:"volvo",
price:30
}
} new Vue({
el:"#app",
data:exampleData
})
</script>
</body>
</html>
注意：
上面代码已经详细解释了有关用法
此处强调的是，<h4>{{htmllist}}</h4>，此代码会将数据按照字符串形式输出，如果想让它按照h6的样式输出，需要在<h4>标签中添加v-html="htmllist"指令
vue指令
定义：以v-开头特性的属性，他们作用于html元素，指令提供一些特性，指定绑定元素产生不同的行为
指令的分类：
v-if:指定条件渲染，他根据表达式的true/false来删除或添加元素
- 语法：v-if="expression"
- expression是返回bool值，表达式true/false
- 删除的意义：就是将内容转换成了注释
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
{{message}}
<h3 v-if="yes">{{yes}}</h3>
<h3 v-if="no">{{no}}</h3>
<h3 v-if="age > 10">age:{{age}}</h3>
<h3 v-if="name.indexOf('w')>=0">name:{{name}}</h3>
</div>
<script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var exampleData={
message:"hello vue",
yes:true,
no:false,
age:18,
name:"wzp"
}
new Vue({
el:"#app",
data:exampleData
})
</script>
</body>
</html>
解析：
代码部分已经详细讲解了相关用法，不清楚的，给我留言即可
v-show：条件渲染的指令，和v-if指令不同，使用v-show指令元素始终会渲染到html中
- 显示与隐藏
- 他只设置style属性 display:block(true)/none(false)
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h3>v-show</h3>
<h4 v-show="yes">yes</h4>
<h4 v-show="no">no</h4>
<h4 v-show="age > 25">age:{{age}}</h4>
<h4 v-show="name.indexOf('i')>=0">name:{{name}}</h4>
</div>
<script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var exmapleData={
message:"hello",
yes:true,
no:false,
age:28,
name:"lion"
}
new Vue({
el:"#app",
data:exmapleData
})
</script>
</body>
</html>
注意：
v-if于v-else是可以一起使用的，相当于 if(){}else{}. 也就是说v-if后可跟v-else.
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
v-show，只是根据条件显示。后面没有v-else
好多教程里面 都写着v-show后面可以跟v-else，是一条误导信息。
v-else:必须跟一个v-if,否则不能够被识别
不存在v-show后面跟v-else(原因上面已经详述)
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h4 v-if="age > 20">age:{{age}}</h4>
<h4 v-else>name:{{name}}</h4>
<hr>
<h4 v-if="age > 30">age:{{age}}</h4>
<h4 v-else>name:{{name}}</h4>
<hr> </div>
<script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var exmapleData={
sex:"Male",
age:28,
name:"lion"
}
new Vue({
el:"#app",
data:exmapleData
})
</script>
</body>
</html>
下一篇将介绍v-bind,v-on,v-model,自定义指令的创建
Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令的更多相关文章
- Vue指令之`v-bind`的三种用法及v-on事件指令
v-bind:是 Vue中,提供的用于绑定属性的指令 1. 直接使用指令`v-bind` 2. 使用简化指令`:` 3. 在绑定的时候,拼接绑定内容:`:title="btnTitle + ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue基础知识总结（一）
一.基本语法: 1.实例化:new Vue({}) 2.el:一定是根容器元素(vue的作用域就是这个根元素内),就是写选择器 data:用于存储数据 methods:定义方法(方法里th ...
- vue基础介绍及使用
1.vue基本使用 vm:el / data v:v-model / {{ }} 1. 引入Vue.js 2. 创建Vue对象 el : 指定根element(选择器) data : 初始化数据(页面 ...
- 双向数据绑定（angular,vue）
最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...
- vue 双向数据绑定的实现学习（一）
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
- Vue中的双向数据绑定简单介绍
1. 文本框绑定v-module <div id="app"> <input type="text" v-model="msg&qu ...
- Vue双向数据绑定原理分析（转）
add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
随机推荐
- 第81节：Java中的数组
第81节:Java中的数组 本节介绍数组的基本概念,数据就是一种数据结构,可以用来存储多个数据,每个数组中可以存放相同类型的数据.比如,在学校,我们是一个班,这里的班级中每个同学都是这个班级数组中的元 ...
- 第35节：Java面向对象中的多线程
Java面向对象中的多线程 多线程 在Java面向对象中的多线程中,要理解多线程的知识点,首先要掌握什么是进程,什么是线程?为什么有多线程呢?多线程存在的意义有什么什么呢?线程的创建方式又有哪些?以及 ...
- 页面css样式找不到问题
出现了一个页面没有样式的问题: 问题: 1.路径不对, 可以打开页面f12看样式是否找到 检查路径是否正确. 2.样式没引全或者没引对. 查看引入的样式是否正确或缺少样式. 3.路径明明写对了却404 ...
- No bean named 'xxxxx' is defined异常,已解决，这个坑很难发现，你get了吗
出现No bean named 'xxxxx' is defined异常 没有定义名为xxx的bean 如果你的代码写的都对,根本问题只有一个地方出错了,那就是你的 basePackage=的包名路径 ...
- Spring Boot Redis Cluster 实战干货
添加配置信息 spring.redis: database: 0 # Redis数据库索引(默认为0) #host: 192.168.1.8 #port: 6379 password: 123456 ...
- 3-7 Vue中的列表渲染
举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...
- Android--UI之ImageSwitcher
前言 这篇博客来聊一聊AndroidUI开发中ImageSwitcher控件的使用.ImageSwitcher控件与ImageView类似,都可以用于显示图片,但是ImageSwitcher通过名字可 ...
- IDEA中MAVEN项目有多个子目录，如何加载构建
ddts这个项目有三个子目录,每个子目录下面也都有一个 pom.xml 此时需要 右键子目录的 pom.xml,选择Add as Maven Project,在上图中cli.core两个目 ...
- 小程序this.setData
data: { isChecked: [ { key: true },{ key: true },{ key: true} ]} 如上,如果我想动态修改isChecked里面指定某个下标的值怎么办? ...
- Unity3D热更新之LuaFramework篇[01]--从零开始
前言 因工作关系,需要对手头的项目进行热更新支持.了解后发现,Lua的几个变种:XLua.ToLua(原uLua)和Slua都可以做Unity热更,而ToLua更是提供了一个简易的热更框架--LuaF ...