VUE 入门 01
什么是VUE？
它是构建用户界面的JavaScript框架（让他自动生成js、css、html）
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
使用
引入vue.js
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
思想
声明式渲染
插值语法：在vue为{{}}，react{}，angular{{}}
表单 ：v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- http-equiv与content属性是固定的 用ie的最高版本渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- seo 搜索引擎 -->
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 数据绑定 -->
{{ message }}
</div> <script>
// 创建了一个vue对象
var app = new Vue({
el: '#app', //找标签 表示当前这个元素开始使用vue
data: {
// 数据属性
message: 'hello vue'
}
})
</script>
</body>
</html>
Vue指令
指令：是带有v-前缀的特殊属性，通过属性来操作元素。声明式指令
v-bind
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span v-bind:title="message">小姐姐，进来看看呀</span>
</div> <script>
var app = new Vue({
el: '#app',
data:{
message:'想你: ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
鼠标悬停
缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a> <!-- 缩写 -->
<a :href="url">...</a>
条件渲染：v-if、v-show
显示与隐藏、列表
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<!– http-equiv与content属性是固定的 用ie的最高版本渲染 –>-->
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<!--<!– seo 搜索引擎 –>-->
<!--<title>Title</title>-->
<!--<script src="vue.js"></script>-->
<!--</head>-->
<!--<body>-->
<!--<div id="app">-->
<!--<!– 数据绑定 –>-->
<!--{{ message }}-->
<!--</div>--> <!--<script>-->
<!--// 创建了一个vue对象-->
<!--var app = new Vue({-->
<!--el: '#app', //找标签 表示当前这个元素开始使用vue-->
<!--data: {-->
<!--// 数据属性-->
<!--message: 'hello vue'-->
<!--}-->
<!--})-->
<!--</script>-->
<!--</body>-->
<!--</html>--> <!-- v-if v-show --> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- http-equiv与content属性是固定的 用ie的最高版本渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- seo 搜索引擎 -->
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-if = 'see'>hello</p>
</div> <!-- v-for 渲染一个列表 -->
<div id="app2">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div> <script>
// 创建了一个vue对象
var app = new Vue({
el: '#app', //找标签 表示当前这个元素开始使用vue
data: {
// 数据属性
see:true // 显示
// see:false // 隐藏
} });
var app2 = new Vue({
el: '#app2',
data:{
todos:[
{ text:'学习 Python'},
{ text: '学习Vue' },
{ text: '学习使我快乐' }
]
}
})
</script>
</body>
</html>
都可以控制切换状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: deepskyblue;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-if = "isShow">我的第一个盒子</div>
<!-- on能绑定所有的事件 调用-->
<button @click = "showHandler()">{{text}}</button> <div class="box2" v-show = 'show'>第二个盒子</div>
<button @click = "showHandler2()">{{text}}</button>
</div> <script type="text/javascript" src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
isShow: true,
text:"隐藏",
show:false
},
methods:{
// 显示与隐藏 并修改text
showHandler(){ // 对象的单体模式 声明
if (this.isShow) {
this.isShow = false;
this.text = "显示";
}else {
this.isShow = true;
this.text = "隐藏";
}
}
}
})
</script>
</body>
</html>
v-if与v-show差别
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if 与 v-for 一起使用 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
v-on
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a> <!-- 缩写 -->
<a @click="doSomething">...</a>
颜色切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: deepskyblue;
}
.box2{ background-color: greenyellow;
}
</style>
</head>
<body>
<div id="app">
<div class="box" :class="{box2:isBox2}"></div>
<input type="button" value="切换" @click = 'box2Handler()'>
</div> <script type="text/javascript" src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
isShow: true,
text:"隐藏",
show:false,
isBox2:false,
},
methods:{
// 显示与隐藏 并修改text
box2Handler(){
this.isBox2 =! this.isBox2
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: deepskyblue;
}
.box2{ background-color: greenyellow;
}
</style>
</head>
<body>
<div id="app">
<div class="box" :class="{box2:isBox2}"></div>
<input type="button" value="切换" @click = 'box2Handler()'>
<!--绑定网址-->
<a :href="url">我想上天</a>
</div> <script type="text/javascript" src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
isShow: true,
text:"隐藏",
show:false,
isBox2:false,
url:"http://www.cnblogs.com/jassin-du/",
},
methods:{
// 显示与隐藏 并修改text
box2Handler(){
this.isBox2 =! this.isBox2
}
}
})
</script>
</body>
给a标签绑定url
计算属性与侦听器
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
。模板即为{{ }}
# 如下面逻辑
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性
计算属性默认是getter（只能去获取东西） 作用 ： 实时监听我们的数据变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<!--1：先圈一块地-->
<div id="computed">
<h2>{{message}}</h2>
<h4>{{getMessage}}</h4>
<button @click="clickBtn()">你好,明天</button>
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var com = new Vue({
el:'#computed', // 声明我要对某标签进行操作
data:{ // 数据属性
message:"hello world"
}, // 2：接将三个方法写上
methods:{ // 方法
clickBtn(){
this.message = 'hello tomorrow'
}
},
computed:{ // 计算属性默认只有getter 实时监听数据变化
getMessage(){
return this.message
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<!--1：先圈一块地-->
<div id="computed">
<h2>{{message}}</h2>
<h4>{{getMessage}}</h4>
<h3>{{reversedMessage}}</h3>
<button @click="clickBtn()">你好,明天</button>
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var com = new Vue({
el:'#computed',
data:{ // 数据属性
message:"hello world"
}, // 2：接将三个方法写上
methods:{ // 方法
clickBtn(){
this.message = 'hello tomorrow'
}
},
computed:{ // 计算属性默认只有getter 实时监听数据变化 reversedMessage: function () { // 反转属性
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
反转属性reversedMessage
getter 的方法有两种写法
// 简便写法
// getMessage(){
// return this.message
// }
// setter方法 :这里的getter方法效果与上面相同
getMessage:{
get:function () {
return this.message
},
计算属性的 setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<!--1：先圈一块地-->
<div id="computed">
<h2>{{message}}</h2>
<h4>{{getMessage}}</h4>
<h3>{{reversedMessage}}</h3>
<button @click="clickBtn()">你好,明天</button>
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var com = new Vue({
el:'#computed',
data:{ // 数据属性
message:"hello world"
}, // 2：接将三个方法写上
methods:{ // 方法
clickBtn(){
// this.message = 'hello tomorrow' // get 只调用到get方法
console.log(this.getMessage); // set 设置值
this.getMessage = 'hello tomorrow'
}
},
computed:{ // 计算属性默认只有getter 实时监听数据变化
// 简便写法
// getMessage(){
// return this.message
// }
// setter方法 :这里的getter方法效果与上面相同
getMessage:{
get:function () {
return this.message
},
set:function (newVal) {
this.message = newVal;
}
}
}
})
</script>
</body>
</html>
VUE 入门 01的更多相关文章
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
- vue入门文章
本来想自己写一篇关于vue入门的文章.但是看到链接的文章后,觉得写得太详细了,实在有保存下来的必要.后面可能在这篇文章基础上,有所内容的增加. CSS预处理器 定义了一种新的专门的编程语言,编译后成正 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- 不用搭环境的10分钟AngularJS指令简易入门01（含例子）
不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...
随机推荐
- log4j2按日志级别输出到指定文件
在项目中,可能会产生非常多的日志记录,为了方便日志分析,一般可以将日志按级别输出到指定文件,本次就先说说log4j2的实现吧: 1.先加入log4j2依赖包 2.写一个java类进行测试,类文件中仅仅 ...
- 解决IE6已终止操作问题
令人崩溃的IE6问题再次出现,打开某个页面时,弹出提示框“Internet Explorer无法打开Internet 站点...已终止操作”. 查了一下资料,感觉“因为js(一个比较复杂的js) ...
- Java 面试题代码类收集
long temp=(int)3.9; System.out.println(temp); temp%=2; System.out.println(temp); 3 1 Java里面类的方法名可以与类 ...
- Apache ab 测试结果的分析
以前安装好APACHE总是不知道该如何测试APACHE的性能,现在总算找到一个测试工具了.就是APACHE自带的测试工具AB(apache benchmark).在APACHE的bin目录下.格式: ...
- springboot部署在云服务器上
1.window云服务器上 在本地的SpringBoot的根目录下 mvn clean package 打包jar 在云服务上安装jdk 将jar拷贝到云服务器上 在jar包所在的相应的位置,执行ja ...
- Maven 修改默认JDK版本
方式1.修改maven全局jdk 修改 安装目录\maven2\conf\settings.xml <profiles> <profile> <id>jdk-1.6 ...
- TestNG，timeOut
这篇先来介绍@Test注释下的一个属性-timeOut.字面意思就是超时判断,详细点说.如果哪个测试方法需要监听执行的时间,那么就可以考虑采用timeOut属性.例如,实际的接口测试中,加入登录接口时 ...
- ios 下拉刷新开源框架 MJRefresh
gitHub 下载框架 搜索MJExampleViewController.h 下拉刷新 MJTableViewController 上拉刷新 MJTableViewController Collec ...
- 算法总结1：K-邻近算法
1. 算法原理: K-邻近算法的原理很简单,就是用你的“邻居”来推断出你的类别.用于离散型数据分析处理. 例子1:如下图有ABCD四个用于参考的样本点,都已知晓自己的坐标位置,这时E来了,不清楚自己的 ...
- bzoj1014: [JSOI2008]火星人prefix splay+hash+二分
Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...