13、vue.js简单入门

本篇导航：

介绍与安装
vue常用指令

一、介绍与安装

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

1、安装

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

13、vue.js简单入门

2、CDN

也可以不下载直接使用cdn

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

3、引用

<script src="vue.js"></script>

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

4、使用格式

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

<div id="app">

    //和django中模版渲染一样使用｛｛变量｝｝插入文本

    {{ message }}

</div>

<script>

    //实例化Vue

    var app = new Vue({

        //定位标签    表示在当前这个元素内开始使用VUE

        el: '#app',

        //变量

        data: {

            message: 'Hello Vue!'

        }

    })

<script>

二、vue常用指令

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

1、v-text,v-html

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <script src="vue.js"></script>

</head>

<body>

    <div id="app">

        <p>{{msg}}</p>

        <p>{{80+2}}</p>

        <p>{{20>30}}</p>

            我是：<h1 v-text="msg">{{str}}</h1>

            你是：<h1 v-text="msg">2222222222222</h1>

            <h2 v-html="hd"></h2>

            <h2 v-html="str"></h2>

    </div>

    <script>

        new Vue({

            el: "#app", //表示在当前这个元素内开始使用VUE

            data:{

                msg: "我是老大",

                hd: "<input type='button' value='你是小三'>",

                str: "我要发财!"

            }

        })

    </script>

</body>

</html>

v-text,v-html

2、v-if,v-show

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <script src="vue.js"></script>

</head>

<body>

      <div id="app">

       <p v-if="pick">我是刘德华</p>

       <p v-else>我是张学友</p>

       <p v-show="temp">我是赵本山</p>

       <p v-show="ok">你喜欢我吗？</p>

    </div>

    <script>

        var vm = new Vue({

            el: "#app",

            data:{

                pick: false,

                temp: true,

                ok: true

            }

        })

         window.setInterval(function(){

             vm.ok = !vm.ok;

         },1000)

    </script>

</body>

</html>

v-if,v-html

3、v-for

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <script src="vue.js"></script>

    <style>

        ul li{

            list-style: none;

        }

    </style>

</head>

<body>

    <div id="app">

        <ul>

            <li v-for="(item,index2) in arr">

                {{item}}: {{index2}}

            </li>

        </ul>

        <ul>

            <li v-for="(item,key,index) in obj">

                {{item}}: {{key}}:{{index}}

            </li>

        </ul>

            <ul>

                <li v-for="item in obj2">

                    {{item.username}}

                    {{item.age}}

                    {{item.sex}}

                </li>

            </ul>

        <div v-for="i in 8">

            {{i}}

        </div>

    </div>

    <script>

        new Vue({

            el: "#app",

            data:{

                arr: [11,22,3344,55],

                obj: {a:"张三",b:"李四",c:"王大拿",d:"谢大脚"},

                obj2:[

                    {username: "jason"},

                    {age: 20},

                    {sex: "male"}

                ],

            }

        })

    </script>

</body>

</html>

v-for

4、v-on

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

</head>

<body>

    <div id="app">

        <ul>

            <li v-for="(item,index) in arr">

                {{item}}: {{index}}

            </li>

        </ul>

        <input type="button" value="点我吧!" @click="show()">

    </div>

    <script>

        new Vue({

            el: "#app",

            data:{

                arr: [11,22,33,44,55],

                ],

            },

        //监听的事件

         methods: {

             show: function () {

                 this.arr.pop();

            }

        }

    })

    </script>

</body>

</html>

v-on

2）小实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <script src="vue.js"></script>

    <style>

        ul li{

            list-style: none;

        }

    </style>

</head>

<body>

    <div id="app">

        <ul>

            <li><input type="checkbox">苹果</li>

            <li><input type="checkbox">香蕉</li>

            <li><input type="checkbox">香梨</li>

            <li><input type="checkbox" v-on:click="create()">其它</li>

            <li v-html="htmlstr" v-show="test"></li>

        </ul>

    </div>

    <script>

        var vm = new Vue({

            el: "#app",

            data:{

                test: false,

                htmlstr: "<textarea></textarea>"

            },

            methods: {

                create: function () {

                    this.test = !this.test;

                }

            }

        })

    </script>

</body>

</html>

动态生成html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

    <style>

        ul li{

            list-style: none;

            display: inline-block;

            border: 1px solid cornflowerblue;

            height:40px;

            line-height: 40px;

            width: 120px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div id="mybox">

        <ul>

            <li>

                <span v-on:click="qh(true)">二唯码登录</span>

            </li>

            <li>

                <span v-on:click="qh(false)">邮箱登录</span>

            </li>

        </ul>

        <div v-show="temp">

            <img src="erma.jpg">

        </div>

        <div v-show="!temp">

            <form action="http://mail.163.com" method="post">

                <p><input type="email"></p>

                <p><input type="password"></p>

                <p><input type="submit" value="登录"></p>

            </form>

        </div>

    </div>

    <script>

        new Vue({

            el: "#mybox",

            data: {

                temp: true

            },

            methods: {

                qh: function (t) {

                    this.temp = t

                }

            }

        })

    </script>

</body>

</html>

tag切换

3）v-on简写

//标准书写：

<input type="button" value="点我吧!" v-on:click="show()">

//简写：

<input type="button" value="点我吧!" @click="show()">

5、v-bind

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

    <style>

        .bk_1{

            background-color: cornflowerblue;

            width: 200px;

            height: 200px;

        }

        .bk_2{

            background-color: red;

            width: 200px;

             height: 200px;

        }

        .bk_3{

            border: 5px solid #000;

        }

    </style>

</head>

<body>

    <div id="app">

        <a href="http://www.qq.com" v-bind:title="msg">腾讯</a>

        <div :class="bk"></div>

        <div :class="bk2"></div>

        <div :class="{bk_2:temp}">fdjjdjdkdkkeedd</div>

        <div :class="[bk2,bk3]">8888888888</div>

    </div>

    <script>

       var vm =  new Vue({

            el: "#app", //表示在当前这个元素内开始使用VUE

            data:{

                msg: "我想去腾讯公司上班",

                bk:"bk_1",

                bk2:"bk_2",

                bk3:"bk_3",

                temp: false

            }

        })

    </script>

</body>

</html>

v-bind

2）简写

//标准写法：

<div v-bind:class="bk"></div>

//简写：

<div :class="bk"></div>

6、v-model

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <script src="vue.js"></script>

    <style>

        ul li{

            list-style: none;

        }

    </style>

</head>

<body>

    <div id="app">

        <input v-model="msg">

        <p>{{msg}}</p>

        <input type="button" value="变化" @click="change">

    </div>

    <script>

        new Vue({

            el: "#app",

            data:{

              msg: "aaaaa"

            },

            methods: {

                change: function () {

                    this.msg = 8888888;

                }

            }

        })

    </script>

</body>

</html>

v-model

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

    <style>

        ul li{

            list-style: none;

        }

        .tds{

            height: 15px;

            width: 175px;

        }

    </style>

</head>

<body>

    <div id="app">

        <div>

            <input type="text" placeholder="姓名" v-model="username">

            <input type="text" placeholder="年龄" v-model="age">

            <input type="button" value="增加" @click="add">

        </div>

            <div>

                <table cellpadding="0" border="1">

                    <tr v-for="(item,index) in arr">

                        <td :class="td" v-if="arr[index].temp">{{item.username}}</td>

                        <td :class="td" v-else><input v-model="msg_user"></td>

                        <td :class="td" v-if="arr[index].temp">{{item.age}}</td>

                        <td :class="td" v-else><input v-model="msg_age"></td>

                        <td>

                            <input type="button" value="删除" @click="del(index)">

                            <input type="button" value="修改" @click="edit1(index)" v-show="arr[index].temp">

                            <input type="button" value="确定" @click="edit2(index)" v-show="!arr[index].temp">

                        </td>

                    </tr>

                </table>

            </div>

    </div>

    <script>

        new Vue({

            el: "#app",

            data:{

                temp:true,

                td:"tds",

                username: "",

                age: "",

                arr: [],

                msg_user:"",

                msg_age:""

            },

            methods: {

                add: function () {

                    this.arr.push({username:this.username, age:this.age, temp:this.temp});

                },

                del: function (index) {

                    this.arr.splice(index,1);

                },

                edit1:function (index) {

                    this.arr[index].temp = !this.arr[index].temp;

                    this.msg_user = this.arr[index].username;

                    this.msg_age = this.arr[index].age

                },

                edit2:function (index) {

                    this.arr[index].temp = !this.arr[index].temp;

                    this.arr[index].username = this.msg_user;

                    this.arr[index].age = this.msg_age

                }

            }

        })

    </script>

</body>

</html>

当前行修改方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <script src="vue.js"></script>

    <style>

        ul li{

            list-style: none;

        }

        .tipbox{

            width: 200px;

            height:200px;

            border: 1px solid cornflowerblue;

            position: absolute;

            background-color: #aaaaaa;

            top: 200px;

            left: 600px;

        }

    </style>

</head>

<body>

    <div id="app">

        <div>

            <input type="text" placeholder="姓名" v-model="username">

            <input type="text" placeholder="年龄" v-model="age">

            <input type="button" value="增加" @click="add">

        </div>

            <div>

                <table cellpadding="0" border="1">

                    <tr v-for="(item,index) in arr">

                        <td>{{item.username}}</td>

                        <td>{{item.age}}</td>

                        <td>{{index}}</td>

                        <td><input type="button" value="删除" @click="del(index)"></td>

                        <td><input type="button" value="修改" @click="showBox(index)"></td>

                    </tr>

                </table>

            </div>

            <div class="tipbox" v-show="isShow">

                <p><input type="text" placeholder="姓名" v-model="m_username"></p>

                <p><input type="text" placeholder="年龄" v-model="m_age"></p>

                <p>

                    <input type="button" value="确定" @click="save()">

                    <input type="button" value="取消" @click="cancel()">

                </p>

            </div>

    </div>

    <script>

        new Vue({

            el: "#app", //表示在当前这个元素内开始使用VUE

            data:{

                username: "",

                age: "",

                arr: [],

                isShow:false,

                m_username: "",

                m_age: "",

                n: 0

            },

            methods: {

                add: function () {

                    this.arr.push({username:this.username, age: this.age});

                },

                del: function (index) {

                    this.arr.splice(index,1);

                },

                showBox: function (index) {

                    this.isShow = true;

                    this.n = index;

                    this.m_username = this.arr[index].username;

                    this.m_age = this.arr[index].age;

                },

                cancel: function () {

                    this.isShow = false

                },

                save: function () {

                    this.arr[this.n].username = this.m_username;

                    this.arr[this.n].age = this.m_age;

                    this.isShow = false

                }

            }

        })

    </script>

</body>

</html>

类模态框修改方式

7、自定义指令

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <script src="vue.js"></script>

    <style>

        ul li{

            list-style: none;

        }

    </style>

</head>

<body>

      <div id="app">

            <input type="text" v-focus>

    </div>

    <script>

        new Vue({

            el: "#app", //表示在当前这个元素内开始使用VUE

            data:{

            },

            //自定义指令

            directives: {

                focus: {    //指令的名字

                    //当绑定的元素显示时

                    inserted: function (tt) {

                        tt.focus();

                        tt.style.backgroundColor = "blue";

                        tt.style.color = "#fff"

                    }

                }

            }

        })

    </script>

</body>

</html>

自定义指令

8、computed计算属性

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

</head>

<body>

    <div id="app">

        <p>{{msg}}</p>

    </div>

    <script>

        var vm = new Vue({

            el: "#app",

            data: {

                temp: 1001

            },

            //计算属性

            computed: {

                msg: function () {

                    if(this.temp > 1000){

                       return parseInt(this.temp/10)-1

                    } else {

                       return this.temp-1

                    }

                }

           }

        })

    </script>

</body>

</html>

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

98、vue&period;js简单入门
本篇导航: 介绍与安装 vue常用指令一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
Vue&period;js简单入门
这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...
vue&period;js 简单入门
转载自:http://blog.csdn.net/violetjack0808/article/details/51451672 <!DOCTYPE html> <html lang ...
Vue&period;js+vue-element搭建属于自己的后台管理模板：Vue&period;js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
Vue的简单入门
Vue的简单入门一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
EChart&period;js 简单入门
EChart.js 简单入门最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
Vue&period;js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备我推荐 ...
Vue的理解：Vue&period;js新手入门指南----转
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
Vue&period;js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

随机推荐

PHPCMS与UCenter整合要点
要点一: PHPCMS不能直接与UCenter整合,而是要经过 PHPSSO 适配,因此应用主URL应是 http://phpcms_url/phpsso_server 这种模式的. 要点二: 因为 ...
NYOJ214
单调递增子序列(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述给定一整型数列{a1,a2...,an}(0<n<=100000),找出单调递增最长 ...
【形式化方法：VDM++系列】2&period;VDMTools环境的搭建
接前文:http://www.cnblogs.com/Kassadin/p/3975853.html 上次讲了软件需求分析的演化过程,本次进入正题——VDM开发环境的搭建 (自从发现能打游戏以来,居然 ...
Unity3d 使用NPOI读写Excel 遇到的问题
开发环境:unity5.3 NPOI(.net 2.0版 http://npoi.codeplex.com/) 运行环境:PC版, 其他平台没有测试先上效果图: 实现步骤: 1.新建一个Exce ...
【转】三次握手与accept()函数
1. 客户端发送SYN给服务器 2. 服务器发送SYN+ACK给客户端 3. 客户端发送ACK给服务器 4. 连接建立,调用accept()函数获取连接
Django URL 命名空间
https://docs.djangoproject.com/en/1.5/topics/http/urls/#introduction 译文: URL 命名空间简介: 当你需要部署一个应用的多个实 ...
docker实践3
我的docker学习笔记3 $docker run ubuntu echo'hello world' $docker run -i -t ubuntu /bin/bash #ps -ef #exi ...
mobile&lowbar;缩放
document.documentElement.clientWidth 不包含滚动条 window.innerWidth ...
RSA加解密算法以及密钥格式
RSA算法: 有个文章关于RSA原理讲的不错: https://blog.csdn.net/dbs1215/article/details/48953589 http://www.ruanyifeng ...
使用ES6新数组方法(象C&num; Lambda表达式一样写查询语句)
let people = [ {id: 1, name: "a", age: 12}, {id: 2, name: "b", age: 13}, {id: 3, ...