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的指令是一大特色 ...
随机推荐
- An Example for Javascript Function Scoping and Closure
1. An Real World Example In the patron detail page of the CRM system I'm working with, there’re larg ...
- Juniper SRX 简单命令二
--------------------------Juniper SRX 用户管理--------------------------- Juniper的命令,其实是比较形象的,英文稍微好一点,基本 ...
- 关于推荐库位 java前端与SQL语句后面的结合
----------------------------------------------------------------------------------- select a1.id,a1. ...
- Python类变量，实例变量，类方法，实例方法，静态方法的分析
Python作为动态语言,跟静态语言如c/c++有很大区别,其中的一个重要的特性就是Python的变量无需声明直接可用.同样,类的成员变量无需声明,直接可用.目的是为了动态语言跟灵活,在思路想到的时候 ...
- OSI7层网络模型协议精析
OSI7层网络模型协议精析 一.总结 一句话总结:在7层模型中,每一层都提供一个特殊的网络功能.从网络功能的角度观察:下面4层(物理层.数据链路层.网络层和传输层)主要提供数据传输和交换功能,即以节点 ...
- 面向目标的场景设置--Goal-Oriented Scenario
在场景设置的时候会有两种场景设置方式: 1,手动模式(Manual Scenario) 2.面向目标的场景设置模式(Goal Oriented scenario) 其中手动模式使用较多,而且灵活应用, ...
- linux入门总结
linux的核心概念知识: linux软件是开源免费的,而linux是由Unix演变而成,Unix是由MINIX演变而成. 2000年以后,linux系统日趋成熟,涌现大量基于linux服务平 ...
- Linux命令详解-rmdir
rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm - r dir命令可代替rmdir,但是有很大危险性.)删除某目录时也必须具有对父目录的写权限. 1．命令 ...
- 为什么需要超出48K的音频采样率，以及PCM到DSD的演进
网上很多观点说,根据采样定理,48K的音频采样率即可无损的表示音频模拟信号(人耳最多可以听到20K的音频),为何还需要96K, 192K等更高的采样率呢?最先我也有这样的疑问,毕竟采样定理是经过数学家 ...
- qt4.8中多线程的几种方式
第一: 用QtConcurrentRun类,适合在另一个线程中运行一个函数.不用继承类,很方便 第二:用QRunnable和QThreadPool结合.继承QRunnable,重写run函数,然后用Q ...