什么是VUE？

它是构建用户界面的JavaScript框架（让他自动生成js、css、html）

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

使用

引入vue.js

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

思想

声明式渲染

插值语法：在vue为{{}}，react{}，angular{{}}

表单 ：v-model

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!-- http-equiv与content属性是固定的 用ie的最高版本渲染 -->
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <!--  seo  搜索引擎  -->
  9.     <title>Title</title>
  10.     <script src="vue.js"></script>
  11. </head>
  12. <body>
  13.     <div id="app">
  14.         <!-- 数据绑定 -->
  15.         {{ message }}
  16.     </div>
  17.  
  18.     <script>
  19.         //  创建了一个vue对象
  20.         var app = new Vue({
  21.             el: '#app', //找标签 表示当前这个元素开始使用vue
  22.             data: {
  23.                 // 数据属性
  24.                 message: 'hello vue'
  25.             }
  26.         })
  27.     </script>
  28. </body>
  29. </html>

Vue指令

指令：是带有v-前缀的特殊属性，通过属性来操作元素。声明式指令

v-bind

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8.     <script src="vue.js"></script>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <span v-bind:title="message">小姐姐，进来看看呀</span>
  13.     </div>
  14.  
  15.     <script>
  16.         var app = new Vue({
  17.             el: '#app',
  18.             data:{
  19.                 message:'想你: ' + new Date().toLocaleString()
  20.             }
  21.         })
  22.     </script>
  23. </body>
  24. </html>

鼠标悬停

缩写

  1. <!-- 完整语法 -->
  2. <a v-bind:href="url">...</a>
  3.  
  4. <!-- 缩写 -->
  5. <a :href="url">...</a>

条件渲染：v-if、v-show

显示与隐藏、列表

  1. <!--<!DOCTYPE html>-->
  2. <!--<html lang="en">-->
  3. <!--<head>-->
  4.     <!--<meta charset="UTF-8">-->
  5.     <!--&lt;!&ndash; http-equiv与content属性是固定的 用ie的最高版本渲染 &ndash;&gt;-->
  6.     <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
  7.     <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
  8.     <!--&lt;!&ndash;  seo  搜索引擎  &ndash;&gt;-->
  9.     <!--<title>Title</title>-->
  10.     <!--<script src="vue.js"></script>-->
  11. <!--</head>-->
  12. <!--<body>-->
  13.     <!--<div id="app">-->
  14.         <!--&lt;!&ndash; 数据绑定 &ndash;&gt;-->
  15.         <!--{{ message }}-->
  16.     <!--</div>-->
  17.  
  18.     <!--<script>-->
  19.         <!--//  创建了一个vue对象-->
  20.         <!--var app = new Vue({-->
  21.             <!--el: '#app', //找标签 表示当前这个元素开始使用vue-->
  22.             <!--data: {-->
  23.                 <!--// 数据属性-->
  24.                 <!--message: 'hello vue'-->
  25.             <!--}-->
  26.         <!--})-->
  27.     <!--</script>-->
  28. <!--</body>-->
  29. <!--</html>-->
  30.  
  31. <!--  v-if v-show -->
  32.  
  33. <!DOCTYPE html>
  34. <html lang="en">
  35. <head>
  36.     <meta charset="UTF-8">
  37.     <!-- http-equiv与content属性是固定的 用ie的最高版本渲染 -->
  38.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  39.     <meta name="viewport" content="width=device-width, initial-scale=1">
  40.     <!--  seo  搜索引擎  -->
  41.     <title>Title</title>
  42.     <script src="vue.js"></script>
  43. </head>
  44. <body>
  45.     <div id="app">
  46.         <p v-if = 'see'>hello</p>
  47.     </div>
  48.  
  49.     <!--  v-for 渲染一个列表 -->
  50.     <div id="app2">
  51.         <ul>
  52.             <li v-for="todo in todos">
  53.                 {{ todo.text }}
  54.             </li>
  55.         </ul>
  56.     </div>
  57.  
  58.     <script>
  59.         //  创建了一个vue对象
  60.         var app = new Vue({
  61.             el: '#app', //找标签 表示当前这个元素开始使用vue
  62.             data: {
  63.                 // 数据属性
  64.                 see:true    // 显示
  65. //                see:false // 隐藏
  66.             }
  67.  
  68.         });
  69.         var app2 = new Vue({
  70.            el: '#app2',
  71.            data:{
  72.                todos:[
  73.                    { text:'学习 Python'},
  74.                    { text: '学习Vue' },
  75.                    { text: '学习使我快乐' }
  76.                ]
  77.            }
  78.         })
  79.     </script>
  80. </body>
  81. </html>

都可以控制切换状态

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8.     <style>
  9.         .box{
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: deepskyblue;
  13.         }
  14.         .box2{
  15.             width: 100px;
  16.             height: 100px;
  17.             background-color: greenyellow;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div id="app">
  23.         <div class="box" v-if = "isShow">我的第一个盒子</div>
  24.         <!-- on能绑定所有的事件  调用-->
  25.         <button @click = "showHandler()">{{text}}</button>
  26.  
  27.         <div class="box2" v-show = 'show'>第二个盒子</div>
  28.         <button @click = "showHandler2()">{{text}}</button>
  29.     </div>
  30.  
  31.     <script type="text/javascript" src="vue.js"></script>
  32.     <script>
  33.         var app = new Vue({
  34.             el:'#app',
  35.             data:{
  36.                 isShow: true,
  37.                 text:"隐藏",
  38.                 show:false
  39.             },
  40.             methods:{
  41.                 // 显示与隐藏 并修改text
  42.                showHandler(){       // 对象的单体模式  声明
  43.                    if (this.isShow) {
  44.                        this.isShow = false;
  45.                        this.text = "显示";
  46.                    }else {
  47.                        this.isShow = true;
  48.                        this.text = "隐藏";
  49.                    }
  50.                }
  51.             }
  52.             })
  53.     </script>
  54. </body>
  55. </html>

v-if与v-show差别

  1. v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  2.  
  3. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  4.  
  5. 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  6.  
  7. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
  8.  
  9. 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
  1. v-if 与 v-for 一起使用
  2.  
  3. 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

v-on

  1. <!-- 完整语法 -->
  2. <a v-on:click="doSomething">...</a>
  3.  
  4. <!-- 缩写 -->
  5. <a @click="doSomething">...</a>

颜色切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8.     <style>
  9.         .box{
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: deepskyblue;
  13.         }
  14.         .box2{
  15.  
  16.             background-color: greenyellow;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div id="app">
  22.         <div class="box" :class="{box2:isBox2}"></div>
  23.         <input type="button" value="切换" @click = 'box2Handler()'>
  24.     </div>
  25.  
  26.     <script type="text/javascript" src="vue.js"></script>
  27.     <script>
  28.         var app = new Vue({
  29.             el:'#app',
  30.             data:{
  31.                 isShow: true,
  32.                 text:"隐藏",
  33.                 show:false,
  34.                 isBox2:false,
  35.             },
  36.             methods:{
  37.                 // 显示与隐藏 并修改text
  38.                 box2Handler(){
  39.                     this.isBox2 =! this.isBox2
  40.                 }
  41.             }
  42.             })
  43.     </script>
  44. </body>
  45. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8.     <style>
  9.         .box{
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: deepskyblue;
  13.         }
  14.         .box2{
  15.  
  16.             background-color: greenyellow;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div id="app">
  22.         <div class="box" :class="{box2:isBox2}"></div>
  23.         <input type="button" value="切换" @click = 'box2Handler()'>
  24.         <!--绑定网址-->
  25.         <a :href="url">我想上天</a>
  26.     </div>
  27.  
  28.     <script type="text/javascript" src="vue.js"></script>
  29.     <script>
  30.         var app = new Vue({
  31.             el:'#app',
  32.             data:{
  33.                 isShow: true,
  34.                 text:"隐藏",
  35.                 show:false,
  36.                 isBox2:false,
  37.                 url:"http://www.cnblogs.com/jassin-du/",
  38.             },
  39.             methods:{
  40.                 // 显示与隐藏 并修改text
  41.                 box2Handler(){
  42.                     this.isBox2 =! this.isBox2
  43.                 }
  44.             }
  45.             })
  46.     </script>
  47. </body>

给a标签绑定url

计算属性与侦听器

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

。模板即为{{ }}

  1. #  如下面逻辑
  2. <div id="example">
  3.   {{ message.split('').reverse().join('') }}
  4. </div>

在这个地方，模板不再是简单的声明式逻辑。这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

计算属性

计算属性默认是getter（只能去获取东西）  作用 ： 实时监听我们的数据变化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8. </head>
  9. <body>
  10.     <!--1：先圈一块地-->
  11.     <div id="computed">
  12.         <h2>{{message}}</h2>
  13.         <h4>{{getMessage}}</h4>
  14.         <button @click="clickBtn()">你好,明天</button>
  15.     </div>
  16.  
  17.     <script type="text/javascript" src="vue.js"></script>
  18.     <script type="text/javascript">
  19.         var com = new Vue({
  20.             el:'#computed',　　// 声明我要对某标签进行操作
  21.             data:{    // 数据属性
  22.                  message:"hello world"
  23.             },
  24.  
  25.             // 2：接将三个方法写上
  26.             methods:{   // 方法
  27.                 clickBtn(){
  28.                     this.message = 'hello tomorrow'
  29.                 }
  30.             },
  31.             computed:{  // 计算属性默认只有getter 实时监听数据变化
  32.                 getMessage(){
  33.                     return this.message
  34.                 }
  35.             }
  36.         })
  37.     </script>
  38. </body>
  39. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8. </head>
  9. <body>
  10.     <!--1：先圈一块地-->
  11.     <div id="computed">
  12.         <h2>{{message}}</h2>
  13.         <h4>{{getMessage}}</h4>
  14.         <h3>{{reversedMessage}}</h3>
  15.         <button @click="clickBtn()">你好,明天</button>
  16.     </div>
  17.  
  18.     <script type="text/javascript" src="vue.js"></script>
  19.     <script type="text/javascript">
  20.         var com = new Vue({
  21.             el:'#computed',
  22.             data:{    // 数据属性
  23.                  message:"hello world"
  24.             },
  25.  
  26.             // 2：接将三个方法写上
  27.             methods:{   // 方法
  28.                 clickBtn(){
  29.                     this.message = 'hello tomorrow'
  30.                 }
  31.             },
  32.             computed:{  // 计算属性默认只有getter 实时监听数据变化
  33.  
  34.                 reversedMessage: function () {  // 反转属性
  35.                     return this.message.split('').reverse().join('')
  36.                 }
  37.             }
  38.         })
  39.     </script>
  40. </body>
  41. </html>

反转属性reversedMessage

getter 的方法有两种写法

  1.                 // 简便写法
  2. //                getMessage(){
  3. //                    return this.message
  4. //                }
  5.                 // setter方法 :这里的getter方法效果与上面相同
  6.                 getMessage:{
  7.                     get:function () {
  8.                         return this.message
  9.                     },

计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Title</title>
  8. </head>
  9. <body>
  10.     <!--1：先圈一块地-->
  11.     <div id="computed">
  12.         <h2>{{message}}</h2>
  13.         <h4>{{getMessage}}</h4>
  14.         <h3>{{reversedMessage}}</h3>
  15.         <button @click="clickBtn()">你好,明天</button>
  16.     </div>
  17.  
  18.     <script type="text/javascript" src="vue.js"></script>
  19.     <script type="text/javascript">
  20.         var com = new Vue({
  21.             el:'#computed',
  22.             data:{    // 数据属性
  23.                  message:"hello world"
  24.             },
  25.  
  26.             // 2：接将三个方法写上
  27.             methods:{   // 方法
  28.                 clickBtn(){
  29.                     //  this.message = 'hello tomorrow'
  30.  
  31.                     // get  只调用到get方法
  32.                     console.log(this.getMessage);
  33.  
  34.                     // set  设置值
  35.                     this.getMessage = 'hello tomorrow'
  36.                 }
  37.             },
  38.             computed:{  // 计算属性默认只有getter 实时监听数据变化
  39.                 // 简便写法
  40. //                getMessage(){
  41. //                    return this.message
  42. //                }
  43.                 // setter方法 :这里的getter方法效果与上面相同
  44.                 getMessage:{
  45.                     get:function () {
  46.                         return this.message
  47.                     },
  48.                     set:function (newVal) {
  49.                         this.message = newVal;
  50.                     }
  51.                 }
  52.             }
  53.         })
  54.     </script>
  55. </body>
  56. </html>

VUE 入门 01的更多相关文章

  1. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

  2. vue入门文章

    本来想自己写一篇关于vue入门的文章.但是看到链接的文章后,觉得写得太详细了,实在有保存下来的必要.后面可能在这篇文章基础上,有所内容的增加. CSS预处理器 定义了一种新的专门的编程语言,编译后成正 ...

  3. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  4. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  5. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  6. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  7. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  8. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  9. 不用搭环境的10分钟AngularJS指令简易入门01（含例子）

    不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...

随机推荐

  1. heartbeat-gui

    一.简介gui heartbeat的v2版本将v1中haresources配置文件使用GUI图形配置接口来配置高可用集群.更加便捷,直观. 二.准备条件和资源规划见上文http://www.cnblo ...

  2. SSM框架下分页的实现（封装page.java和List<?>）

    之前写过一篇博客  java分页的实现(后台工具类和前台jsp页面),介绍了分页的原理. 今天整合了Spring和SpringMVC和MyBatis,做了增删改查和分页,之前的逻辑都写在了Servle ...

  3. 【转】Python 字符串大小写转换

    转载自:python 中字符串大小写转换 一.pyhton字符串的大小写转换, 常用的有以下几种方法: 1.对字符串中所有字符(仅对字母有效)的大小写转换,有两个方法: print 'just to ...

  4. 网络流learning

    上次学习网络流还是大一的下学期,之后就被从图论分出来交给队友了 然而吉林一战,队友在深圳读研而不能来,于是需要自己学习一下,争取在比赛前看完网络流建模汇总和一些总结,升华一下. 同时记录一下自己做过的 ...

  5. Nginx的坑

    Nginx的重启命令:./nginx -s reload  有时候没有效果,原因不知, 要重启可以使用:killall nginx,然后./nginx  (就是先kill掉Nginx,然后再重启Ngi ...

  6. js中的内部属性与delete操作符

    本文正式地址:http://www.xiabingbao.com/javascript/2015/08/03/javascript-delete-configurable 在讲解Configurabl ...

  7. 理解OpenID和OAuth的区别

    在项目开发中,我们经常说授权认证,经常把他们放到一起去描述,那两者在本质上是有区别的,OpenID和OAuth就是我们说的认证和授权. OpenID:Authentication 认证 OAuth : ...

  8. 在阿里云服务器上搭建 Apache Tomat 应用

    在阿里云上购买一台服务器,系统采用 window 2008 Server 企业版,64位 1.下载Java7 JRE,安装 http://www.java.com/zh_CN/download/man ...

  9. python sort与sorted使用笔记

    Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列 一,最简单的排序 1.使用sort排序 my_list = [3 ...

  10. JavaScript---js的模块化

    js的模块模式被定义为给类提供私有和公共封装的一种方法,也就是我们常说的“模块化”. 怎么实现“模块化”? 通过闭包的原理来实现“模块化”  ,具体实现:1.必须有外部的封闭函数,该函数必须至少被调用 ...