本篇导航：

一、介绍与安装

vue是一套构建用户界面的JAVASCRIPT框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

1、安装

下载vue.js：https://cn.vuejs.org/v2/guide/installation.html

2、CDN

也可以不下载直接使用cdn

https://cdn.jsdelivr.net/npm/vue

3、引用

  1. <script src="vue.js"></script>
  1. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

4、使用格式

{{}}，里面可以放表达式

  1. <div id="app">
  2.     //和django中模版渲染一样使用｛｛变量｝｝插入文本
  3.     {{ message }}
  4. </div>
  5.  
  6. <script>
  7.     //实例化Vue
  8.     var app = new Vue({
  9.         //定位标签    表示在当前这个元素内开始使用VUE
  10.         el: '#app',
  11.         //变量
  12.         data: {
  13.             message: 'Hello Vue!'
  14.         }
  15.     })
  16. <script>

二、vue常用指令

指令：是带有V-前缀的特殊属性，通过属性来操作元素

1、v-text,v-html

v-text：可以在元素当中插入值

v-html：元素不中不仅可以插入文本，还可以插入标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    <script src="vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <p>{{msg}}</p>
  11.         <p>{{80+2}}</p>
  12.         <p>{{20>30}}</p>
  13.             我是：<h1 v-text="msg">{{str}}</h1>
  14.             你是：<h1 v-text="msg">2222222222222</h1>
  15.  
  16.             <h2 v-html="hd"></h2>
  17.             <h2 v-html="str"></h2>
  18.     </div>
  19.     <script>
  20.         new Vue({
  21.             el: "#app", //表示在当前这个元素内开始使用VUE
  22.             data:{
  23.                 msg: "我是老大",
  24.                 hd: "<input type='button' value='你是小三'>",
  25.                 str: "我要发财!"
  26.             }
  27.         })
  28.     </script>
  29. </body>
  30. </html>

v-text,v-html

2、v-if,v-show

v-if：根据表达式的真假值来动态插入和移除元素

v-show：根据表达式的真假值来隐藏和显示元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    <script src="vue.js"></script>
  7. </head>
  8. <body>
  9.       <div id="app">
  10.        <p v-if="pick">我是刘德华</p>
  11.        <p v-else>我是张学友</p>
  12.        <p v-show="temp">我是赵本山</p>
  13.  
  14.        <p v-show="ok">你喜欢我吗？</p>
  15.  
  16.     </div>
  17.     <script>
  18.         var vm = new Vue({
  19.             el: "#app",
  20.             data:{
  21.                 pick: false,
  22.                 temp: true,
  23.                 ok: true
  24.             }
  25.         })
  26.  
  27.          window.setInterval(function(){
  28.              vm.ok = !vm.ok;
  29.          },1000)
  30.     </script>
  31. </body>
  32. </html>

v-if,v-html

3、v-for

v-for：根据变量的值来循环渲染元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    <script src="vue.js"></script>
  7.     <style>
  8.         ul li{
  9.             list-style: none;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="app">
  15.         <ul>
  16.             <li v-for="(item,index2) in arr">
  17.                 {{item}}: {{index2}}
  18.             </li>
  19.         </ul>
  20.  
  21.         <ul>
  22.             <li v-for="(item,key,index) in obj">
  23.                 {{item}}: {{key}}:{{index}}
  24.             </li>
  25.         </ul>
  26.             <ul>
  27.                 <li v-for="item in obj2">
  28.                     {{item.username}}
  29.                     {{item.age}}
  30.                     {{item.sex}}
  31.                 </li>
  32.             </ul>
  33.         <div v-for="i in 8">
  34.             {{i}}
  35.         </div>
  36.     </div>
  37.     <script>
  38.         new Vue({
  39.             el: "#app",
  40.             data:{
  41.                 arr: [11,22,3344,55],
  42.                 obj: {a:"张三",b:"李四",c:"王大拿",d:"谢大脚"},
  43.                 obj2:[
  44.                     {username: "jason"},
  45.                     {age: 20},
  46.                     {sex: "male"}
  47.                 ],
  48.             }
  49.         })
  50.     </script>
  51. </body>
  52. </html>

v-for

4、v-on

1）v-on：监听元素事件，并执行相应的操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <ul>
  11.             <li v-for="(item,index) in arr">
  12.                 {{item}}: {{index}}
  13.             </li>
  14.         </ul>
  15.  
  16.         <input type="button" value="点我吧!" @click="show()">
  17.  
  18.     </div>
  19.     <script>
  20.         new Vue({
  21.             el: "#app",
  22.             data:{
  23.                 arr: [11,22,33,44,55],
  24.                 ],
  25.             },
  26.         //监听的事件
  27.          methods: {
  28.              show: function () {
  29.                  this.arr.pop();
  30.             }
  31.         }
  32.     })
  33.     </script>
  34. </body>
  35. </html>

v-on

2）小实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    <script src="vue.js"></script>
  7.     <style>
  8.         ul li{
  9.             list-style: none;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="app">
  15.         <ul>
  16.             <li><input type="checkbox">苹果</li>
  17.             <li><input type="checkbox">香蕉</li>
  18.             <li><input type="checkbox">香梨</li>
  19.             <li><input type="checkbox" v-on:click="create()">其它</li>
  20.             <li v-html="htmlstr" v-show="test"></li>
  21.         </ul>
  22.  
  23.     </div>
  24.     <script>
  25.         var vm = new Vue({
  26.             el: "#app",
  27.             data:{
  28.                 test: false,
  29.                 htmlstr: "<textarea></textarea>"
  30.             },
  31.             methods: {
  32.                 create: function () {
  33.                     this.test = !this.test;
  34.                 }
  35.             }
  36.         })
  37.     </script>
  38. </body>
  39. </html>

动态生成html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue.js"></script>
  7.     <style>
  8.         ul li{
  9.             list-style: none;
  10.             display: inline-block;
  11.             border: 1px solid cornflowerblue;
  12.             height:40px;
  13.             line-height: 40px;
  14.             width: 120px;
  15.             text-align: center;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="mybox">
  21.         <ul>
  22.             <li>
  23.                 <span v-on:click="qh(true)">二唯码登录</span>
  24.             </li>
  25.             <li>
  26.                 <span v-on:click="qh(false)">邮箱登录</span>
  27.             </li>
  28.         </ul>
  29.  
  30.         <div v-show="temp">
  31.             <img src="erma.jpg">
  32.         </div>
  33.         <div v-show="!temp">
  34.             <form action="http://mail.163.com" method="post">
  35.                 <p><input type="email"></p>
  36.                 <p><input type="password"></p>
  37.                 <p><input type="submit" value="登录"></p>
  38.             </form>
  39.         </div>
  40.     </div>
  41.     <script>
  42.         new Vue({
  43.             el: "#mybox",
  44.             data: {
  45.                 temp: true
  46.             },
  47.             methods: {
  48.                 qh: function (t) {
  49.                     this.temp = t
  50.                 }
  51.             }
  52.         })
  53.     </script>
  54. </body>
  55. </html>

tag切换

3）v-on简写

  1. //标准书写：
  2. <input type="button" value="点我吧!" v-on:click="show()">
  3. //简写：
  4. <input type="button" value="点我吧!" @click="show()">

5、v-bind

1）v-bind：绑定元素的属性来执行相应的操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue.js"></script>
  7.     <style>
  8.         .bk_1{
  9.             background-color: cornflowerblue;
  10.             width: 200px;
  11.             height: 200px;
  12.         }
  13.         .bk_2{
  14.             background-color: red;
  15.             width: 200px;
  16.              height: 200px;
  17.         }
  18.         .bk_3{
  19.             border: 5px solid #000;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div id="app">
  25.         <a href="http://www.qq.com" v-bind:title="msg">腾讯</a>
  26.         <div :class="bk"></div>
  27.         <div :class="bk2"></div>
  28.  
  29.         <div :class="{bk_2:temp}">fdjjdjdkdkkeedd</div>
  30.         <div :class="[bk2,bk3]">8888888888</div>
  31.     </div>
  32.     <script>
  33.        var vm =  new Vue({
  34.             el: "#app", //表示在当前这个元素内开始使用VUE
  35.             data:{
  36.                 msg: "我想去腾讯公司上班",
  37.                 bk:"bk_1",
  38.                 bk2:"bk_2",
  39.                 bk3:"bk_3",
  40.                 temp: false
  41.             }
  42.         })
  43.     </script>
  44. </body>
  45. </html>

v-bind

2）简写

  1. //标准写法：
  2. <div v-bind:class="bk"></div>
  3. //简写：
  4. <div :class="bk"></div>

6、v-model

1）v-model：实现了数据和视图的双向绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    <script src="vue.js"></script>
  7.     <style>
  8.         ul li{
  9.             list-style: none;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="app">
  15.         <input v-model="msg">
  16.         <p>{{msg}}</p>
  17.         <input type="button" value="变化" @click="change">
  18.     </div>
  19.     <script>
  20.         new Vue({
  21.             el: "#app",
  22.             data:{
  23.               msg: "aaaaa"
  24.             },
  25.             methods: {
  26.                 change: function () {
  27.                     this.msg = 8888888;
  28.                 }
  29.             }
  30.  
  31.         })
  32.     </script>
  33. </body>
  34. </html>

v-model

2）简单实现学生信息增删改：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue.js"></script>
  7.     <style>
  8.         ul li{
  9.             list-style: none;
  10.         }
  11.         .tds{
  12.             height: 15px;
  13.             width: 175px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div id="app">
  19.         <div>
  20.             <input type="text" placeholder="姓名" v-model="username">
  21.             <input type="text" placeholder="年龄" v-model="age">
  22.             <input type="button" value="增加" @click="add">
  23.         </div>
  24.             <div>
  25.                 <table cellpadding="0" border="1">
  26.                     <tr v-for="(item,index) in arr">
  27.                         <td :class="td" v-if="arr[index].temp">{{item.username}}</td>
  28.                         <td :class="td" v-else><input v-model="msg_user"></td>
  29.                         <td :class="td" v-if="arr[index].temp">{{item.age}}</td>
  30.                         <td :class="td" v-else><input v-model="msg_age"></td>
  31.  
  32.                         <td>
  33.                             <input type="button" value="删除" @click="del(index)">
  34.                             <input type="button" value="修改" @click="edit1(index)" v-show="arr[index].temp">
  35.                             <input type="button" value="确定" @click="edit2(index)" v-show="!arr[index].temp">
  36.                         </td>
  37.                     </tr>
  38.                 </table>
  39.             </div>
  40.     </div>
  41.     <script>
  42.         new Vue({
  43.             el: "#app",
  44.             data:{
  45.                 temp:true,
  46.                 td:"tds",
  47.                 username: "",
  48.                 age: "",
  49.                 arr: [],
  50.                 msg_user:"",
  51.                 msg_age:""
  52.             },
  53.             methods: {
  54.                 add: function () {
  55.                     this.arr.push({username:this.username, age:this.age, temp:this.temp});
  56.                 },
  57.                 del: function (index) {
  58.                     this.arr.splice(index,1);
  59.                 },
  60.                 edit1:function (index) {
  61.                     this.arr[index].temp = !this.arr[index].temp;
  62.                     this.msg_user = this.arr[index].username;
  63.                     this.msg_age = this.arr[index].age
  64.                 },
  65.                 edit2:function (index) {
  66.                     this.arr[index].temp = !this.arr[index].temp;
  67.                     this.arr[index].username = this.msg_user;
  68.                     this.arr[index].age = this.msg_age
  69.                 }
  70.             }
  71.         })
  72.     </script>
  73. </body>
  74. </html>

当前行修改方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    <script src="vue.js"></script>
  7.     <style>
  8.         ul li{
  9.             list-style: none;
  10.         }
  11.         .tipbox{
  12.             width: 200px;
  13.             height:200px;
  14.             border: 1px solid cornflowerblue;
  15.             position: absolute;
  16.             background-color: #aaaaaa;
  17.             top: 200px;
  18.             left: 600px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div id="app">
  24.         <div>
  25.             <input type="text" placeholder="姓名" v-model="username">
  26.             <input type="text" placeholder="年龄" v-model="age">
  27.             <input type="button" value="增加" @click="add">
  28.         </div>
  29.             <div>
  30.                 <table cellpadding="0" border="1">
  31.                     <tr v-for="(item,index) in arr">
  32.                         <td>{{item.username}}</td>
  33.                         <td>{{item.age}}</td>
  34.                         <td>{{index}}</td>
  35.                         <td><input type="button" value="删除" @click="del(index)"></td>
  36.                         <td><input type="button" value="修改" @click="showBox(index)"></td>
  37.                     </tr>
  38.                 </table>
  39.             </div>
  40.             <div class="tipbox" v-show="isShow">
  41.                 <p><input type="text" placeholder="姓名" v-model="m_username"></p>
  42.                 <p><input type="text" placeholder="年龄" v-model="m_age"></p>
  43.                 <p>
  44.                     <input type="button" value="确定" @click="save()">
  45.                     <input type="button" value="取消" @click="cancel()">
  46.                 </p>
  47.             </div>
  48.     </div>
  49.     <script>
  50.         new Vue({
  51.             el: "#app", //表示在当前这个元素内开始使用VUE
  52.             data:{
  53.                 username: "",
  54.                 age: "",
  55.                 arr: [],
  56.                 isShow:false,
  57.                 m_username: "",
  58.                 m_age: "",
  59.                 n: 0
  60.             },
  61.             methods: {
  62.                 add: function () {
  63.                     this.arr.push({username:this.username, age: this.age});
  64.                 },
  65.                 del: function (index) {
  66.                     this.arr.splice(index,1);
  67.                 },
  68.                 showBox: function (index) {
  69.                     this.isShow = true;
  70.                     this.n = index;
  71.                     this.m_username = this.arr[index].username;
  72.                     this.m_age = this.arr[index].age;
  73.                 },
  74.                 cancel: function () {
  75.                     this.isShow = false
  76.                 },
  77.                 save: function () {
  78.                     this.arr[this.n].username = this.m_username;
  79.                     this.arr[this.n].age = this.m_age;
  80.                     this.isShow = false
  81.                 }
  82.             }
  83.         })
  84.     </script>
  85. </body>
  86. </html>

类模态框修改方式

7、自定义指令

特定指令无法满足我们的开发需求时可以自定义指令

当进入一个页面时，输入框获取焦点，且背景颜色是蓝色，字体颜色是白色：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    <script src="vue.js"></script>
  7.     <style>
  8.         ul li{
  9.             list-style: none;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.       <div id="app">
  15.             <input type="text" v-focus>
  16.     </div>
  17.     <script>
  18.         new Vue({
  19.             el: "#app", //表示在当前这个元素内开始使用VUE
  20.             data:{
  21.  
  22.             },
  23.             //自定义指令
  24.             directives: {
  25.                 focus: {    //指令的名字
  26.                     //当绑定的元素显示时
  27.                     inserted: function (tt) {
  28.                         tt.focus();
  29.                         tt.style.backgroundColor = "blue";
  30.                         tt.style.color = "#fff"
  31.                     }
  32.                 }
  33.             }
  34.         })
  35.     </script>
  36. </body>
  37. </html>

自定义指令

8、computed计算属性

从前面的代码中可以了解{{}}中可以放表达式 但是当简单的表达式无法满足业务时就需要计算属性了

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <p>{{msg}}</p>
  11.     </div>
  12.     <script>
  13.         var vm = new Vue({
  14.             el: "#app",
  15.             data: {
  16.                 temp: 1001
  17.             },
  18.             //计算属性
  19.             computed: {
  20.                 msg: function () {
  21.                     if(this.temp > 1000){
  22.                        return parseInt(this.temp/10)-1
  23.                     } else {
  24.                        return this.temp-1
  25.                     }
  26.                 }
  27.            }
  28.         })
  29.     </script>
  30. </body>
  31. </html>

98、vue.js简单入门的更多相关文章

  1. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  2. Vue.js简单入门

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...

  3. vue.js 简单入门

    转载自:http://blog.csdn.net/violetjack0808/article/details/51451672 <!DOCTYPE html> <html lang ...

  4. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  5. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  6. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  7. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  8. Vue的理解：Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  9. Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

随机推荐

  1. JAVA模板方法

    package project01; abstract class MyRuntime{ public final void runtime(){ long starttime =System.cur ...

  2. thinkphp5使用PHPExcel导入Excel数据

    安装PHPExcel扩展类 地址:https://github.com/PHPOffice/PHPExcel ①通过composer安装 ②手动下载, 放在项目的extend目录下 代码中引入 由于P ...

  3. 高效的CSS代码(1)

    ——阅读笔记,欢迎纠错 平时写CSS时常用的两个CSS文档(小杂感觉用的蛮喜欢,也是看了些书,尝试使用效果不错) /************CSS reset *********/ /******** ...

  4. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  5. MNIST-NameError: name ‘input_data’ is not defined解决办法

    在学习TensorFlow文档教程的时候, 在MNIST入门一节,发现直接运行下载MNIST数据集的代码会报错.原代码如下: import tensorflow.examples.tutorials. ...

  6. JAVA中的按值传递

    Java中只有按值传递,没有按引用传递! 方法参数共有两种类型: 基本数据类型 对象引用 一:基本数据类型 首先看一个小例子: package chuandi; public class Test1 ...

  7. 表迁移工具的选型-复制ibd的方法

    1.1. 场景 有的时候开放人员自己的库需要帮忙导一些数据,但是表的数据量又很大.虽然说使用mysqldump或mysqlpump也可以导.但是这耗时需要比较久. 记得之前建议开放人员可以直接使用na ...

  8. hive问题： For direct MetaStore DB connections, we don't support retries at the client level

    已经配置好hive,mysql作为元数据的数据库.在hive中执行drop语句出错: drop table mytest; 错误提示如下: FAILED: SemanticException Unab ...

  9. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  10. JavaScript基础知识（数据类型及转换、运算符）

    9.数据类型 概念:表示当前存储的数据的分类(表示数字 - 整数和小数) u  原始类型(原始值) -----[typeof运算符:判断变量的原始类型] *number(数字):表示数字        ...