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的指令是一大特色 ...
随机推荐
- 从零开始玩转JMX(二)——Condition
Notification 一个MBean提供的管理接口允许代理对其管理资源进行控制和配置.然而,对管理复杂的分布式系统来说,这些接口知识提供了一部分功能.通常,管理应用程序需要对状态变化或者当特别情况 ...
- NOIP2014 T4 子矩阵 dfs+dp
最近在狂补题啊QAQ... 打算先把NOIP的干掉吧... 点我看题 链接还是放洛谷的了... 题意:给一个n*m的矩阵,在这个矩阵里选 r 行 c 列,然后这 r 行 c 列所相交的格子为新矩阵的, ...
- 初入spring boot（七 ）Spring Data JPA
Spring Data JPA通过提供基于JPA的Repository极大地减少JPA作为数据访问方案的代码量. 1.定义数据访问层 使用Spring Data JPA建立数据访问层十分简单,只需定义 ...
- Docker Mysql主从同步配置搭建Demo
进行Docker操作前,先建立目录,我的路径是d:/docker/mysql,目录结构如下: --mysql --master --data --conf --my.cnf --slaver --da ...
- windows组策略屏蔽
点“IP安全策略,在本地机器”——>创建IP安全策略---->下一步---->名称随便写,如输入阻止,然后一直点下一步,出现提示点是,一直到完成,这个时候就创建了一个名为“阻止”的策 ...
- MySQL索引失效的场景
WHERE字句的查询条件里有不等于号(WHERE column!=-),MYSQL将无法使用索引 类似地,如果WHERE字句的查询条件里使用了函数(如:WHERE DAY(column)=-),MYS ...
- 前端项目，引入PingFang SC字体
在仿苹果官网"垃圾桶"时, 设计出的UI使用PingFang SC 字体,在网上查了很久,特记录.如果你有更好的方法,欢迎评论留言~ 实现原理,使用@font-face将字体下载在 ...
- Python连接SQLite数据库代码
import sqlite3 # create database conn = sqlite3.connect('test.db') #不存在就创建后再打开 print ("Opened d ...
- java MongoDB查询（二）复杂查询
前言 在上篇<java MongoDB查询(一)简单查询>中我们简单了解了下查询,但是仅仅有那些查询是不够用的,还需要复杂的查询,这篇就这点进行叙述. 1.数据结构 集合:firstCol ...
- 玲珑oj 1117 线段树+离线+离散化,laz大法
1117 - RE:从零开始的异世界生活 Time Limit:1s Memory Limit:256MByte Submissions:438Solved:68 DESCRIPTION 486到了异 ...