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的指令是一大特色 ...
随机推荐
- uboot源码中"include/configs/$(boardname).h"与"configs/$(boardname)_defconfig"之间有何异同
答:最大的不同就是"configs/boardname_defconfig"中的选项都可以在make menuconfig中进行配置,而"include/configs/ ...
- TeeChart.Direct2D.dll的使用
这个dll本身依赖于第三方的控件,SlimDX ,可以从 http://slimdx.org/ 下载. .net4.0的版本区分x86和x64 帧数的概念 我们通常说帧数,简单地说,就是在1秒钟时间 ...
- MapReduce实现共同朋友问题
答案: package com.duking.mapreduce; import java.io.IOException; import java.util.Set; import java.util ...
- 使用httpclient提交表单数据加号（+）会被自动替换成空格的坑
坑的场景: 今天使用httpclient-4.5.3版本,发送如下报文: { "idNo": "7+6+0+2ce722a546b39463bd62817fe57f8&q ...
- SPSS 分布类型的检验
假设检验的标准步骤: 1.建立假设:根据问题的需要提出原假设H0,以及其对立面备择假设H1. 2.确立检验水准:即设立小概率事件的界值α. 3.进行试验:得到用于统计分析的样本,以该试验的结果作为假设 ...
- hiho 有序01字符串 dp
题目1 : 有序01字符串 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 对于一个01字符串,你每次可以将一个0修改成1,或者将一个1修改成0.那么,你最少需要修改多少 ...
- JavaScript清除字符串前后空格
一.通过循环检查,然后提取非空格字符串 //去掉前后空白 function trim(s){ return trimRight(trimLeft(s)); } //去掉左边的空白 function t ...
- [javascript]jQuery绑定事件方法：on()
语法: $(selector).on(event,childSelector,data,function) on(event,childSelector,data,function):在被选元素及子元 ...
- 英语每日阅读---8、VOA慢速英语(翻译+字幕+讲解):脸肓症患者记不住别人的脸
英语每日阅读---8.VOA慢速英语(翻译+字幕+讲解):脸肓症患者记不住别人的脸 一.总结 一句话总结: a.neural abnormalities are more widespread:Duc ...
- AngularJS 教程 - CodePreject
http://www.codeproject.com/Articles/1065838/AngularJS-Tutorial Article Series Tutorial 1: Angular JS ...