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的指令是一大特色 ...
随机推荐
- hadoop系统的端口
hadoop系统部署时用到不少端口.有的是Web UI所使用的,有的是内部通信所使用的,有的是监控所使用的.实际系统中可能用于防火墙的端口设计.一些内部通信用的端口可能也需要外部能访问.如两个集群的数 ...
- gcc编译出错---make[5]: *** [s-attrtab] Killed
内存不足导致的编译出错,解决方法是增加swapfile. root@ubuntu:home# swapon -s Filename Type Size Used ...
- codeforces781D Axel and Marston in Bitland
题目链接:codeforces781D 正解:$bitset$+状压$DP$ 解题报告: 考虑用$f[t][0.1][i][j]$表示从$i$出发走了$2^t$步之后走到了$j$,且第一步是走的$0$ ...
- 简化Kubernetes应用部署工具-Helm
[编者的话]微服务和容器化给复杂应用部署与管理带来了极大的挑战.Helm是目前Kubernetes服务编排领域的唯一开源子项目,做为Kubernetes应用的一个包管理工具,可理解为Kubernete ...
- linux入门总结
linux的核心概念知识: linux软件是开源免费的,而linux是由Unix演变而成,Unix是由MINIX演变而成. 2000年以后,linux系统日趋成熟,涌现大量基于linux服务平 ...
- MySQl的group by 与排序
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtoAAAFLCAIAAABnXrwfAAAgAElEQVR4nO2dT29jvZHu+WHnW8xqdl ...
- 轮播图插件 SuperSlide2.1滑动门jQuery插件
http://down.admin5.com/demo/code_pop/18/562/ SuperSlide2.1滑动门jQuery插件
- [JS]JavaScript判断操作系统版本
function detectOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.platform == " ...
- js获取显示器、页面等高度 (转)
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- 获取手机已安装应用的name，bundleIdentitifer
获取手机已安装应用的name,bundleIdentitifer Class c =NSClassFromString(@"LSApplicationWorkspace"); id ...