引入vue.js

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

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

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->

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

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

声明式渲染

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    {{ message }}

</div>

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

<script>

    var app = new Vue({

        el: '#app',

        data: {

            message: 'Hello Vue!'

        }

    })

</script>

</body>

</html>

绑定事件 v-bind

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app-2">

    <span v-bind:title="message">  // v-bind 绑定事件指令

        鼠标悬停几秒显示此处动态绑定的提示信息！

    </span>

</div>

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

<script>

    var app02 = new Vue({

        el: '#app-2',

        data: {

            message: '页面加载于 ' + new Date().toLocaleString()

        }

    })

</script>

</body>

</html>

条件判断 v-if

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app-3">

    <span v-if="seen">  // v-if 判断指令，seen是true就展示

        看到我了！

    </span>

</div>

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

<script>

    var app3 = new Vue({

        el: "#app-3",

        data: {

            seen: true

        }

    })

</script>

</body>

</html>

循环 v-for

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app-4">

    <ol>

        <li v-for="todo in todos">

            {{todo.text}}

        </li>

    </ol>

</div>

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

<script>

    var app4 = new Vue({

        el: "#app-4",

        data: {

            todos: [

                {"text": "西瓜"},

                {"text": "苹果"},

                {"text": "西红柿"}

            ]

        }

    })

</script>

</body>

</html>

事件监听 v-on

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app-5">

    <p>

        {{message}}

    </p>

    <button v-on:click="reverseMessage">反转信息</button>

</div>

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

<script>

    var app5 = new Vue({

        el: "#app-5",

        data: {

            message: "Hello Vue!"

        },

        methods: {

            reverseMessage: function () {

                this.message = this.message.split('').reverse().join('')

            }

        }

    })

</script>

</body>

</html>

监听输入框 v-model

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app-6">

    <p>

        {{message}}

    </p>

    <input type="text" v-model="message">

</div>

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

<script>

    var app6 = new Vue({

        el: "#app-6",

        data: {

            message: "Hello Vue!"

        }

    })

</script>

</body>

</html>

Vue组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app-7">

    <ol>

        <todo-item

                v-for="item in groceryList"

                v-bind:todo="item"

                v-bind:key="item.id"

        ></todo-item>

    </ol>

</div>

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

<script>

    Vue.component("todo-item", {  // 模板组件

        props: ['todo'],

        template: '<li>{{todo.text}}</li>'

        }

    );

    var app7 = new Vue({

        el: "#app-7",

        data: {

            groceryList: [

                {id: , text: "苹果"},

                {id: , text: "西瓜"},

                {id: , text: "西红柿"}

            ]

        }

    })

</script>

</body>

</html>

vue之用法的更多相关文章

  1. Vue props用法详解

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...

  2. vue setTimeout用法 jquery滚动到某一个div的底部

    //vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

  3. vue better-scroll用法

    滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题. 常用效果:移动端很常见的效果,当滑动右边部分的时候,左边 ...

  4. Vue 基本用法

    Vue的基本用法 模板语法{{ }} 关闭掉 django中提供的模板语法{{ }} 指令系统 v-text v-html v-show和v-if v-bind和v-on v-for v-model ...

  5. Vue基本用法

    在学习Vue的基本用法之前,我们先简单的了解一些es6的语法 let: 特点:1.局部作用域 2.不会存在变量提升 3.变量不能重复声明 const: 特点:1.局部作用域 2.不会存在变量提升 3. ...

  6. vue插槽用法(极客时间Vue视频笔记)

    vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. Vue.extend用法

    Vue.extend 是构造一个组件的语法器. 用法 Vue.extend ( options ),options 是对象: 使用基础Vue构造器,创建一个子类,参数是一个包含组件选项的对象,data ...

  8. vue基础用法

    vue.js是什么 vue.js也称为vue,读音/vju/ 是一个构建用户界面的框架 是一个轻量级MVVM(Model-view-viewModel)框架,和angular,react类似,其实就是 ...

  9. 杂记 -- 关于vue-router样式、vuecli引用全局js函数、vue.slot用法

    1.routerLinkTo 样式设置 首先,点击routerlink标签如下图:添加:router-link-active,router-link-exact-active两个类的样式 router ...

随机推荐

  1. phpcms v9 添加内容出现500错误

    今天开发好一个网站,上传网站后,不知道安装的时候要求fsockopen()函数打开,我直接跳过安装完成的,所以搞得后面出错了,我一直以为这个问题,今天花了一天的时间找资料,测试,终于知道什么原因了,其 ...

  2. 【nginx】nginx tomcat session 共享配置

    tomcat,redis下载忽略. 一.从github上下载源码,https://github.com/jcoleman/tomcat-redis-session-manager, 将源码复制到开发工 ...

  3. windows 7 64位出现Oracle中文乱码

    提示oracle客户端无法连接指定字符 安装好客户端之后,如图 将数据库dbhome_1中的network文件夹全部复制到客户端,如图 然后在设置环境变量:F:\app\Administrator\p ...

  4. Faulty Odometer(九进制数)

    Faulty Odometer Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9301   Accepted: 5759 D ...

  5. MyBatis 与 Spring 是如何结合在一起工作的——mybatis-spring（version：1.2.2）

    在MyBatis-Spring的项目中,我们一般会为MyBatis配置两个配置文件 beans-mybatis.xml 和 mybatis-config.xml.其中 beans-mybatis.xm ...

  6. numpy, pandas, matplotlib等常用库的学习手册

    pandas介绍: 待续 参考资料: 中文:https://www.cnblogs.com/skying555/p/5914391.html 英文:http://www.datadependence. ...

  7. Python easyGUI 登录框 非空验证

    import easygui as g msg='欢迎注册' title='注册' fieldNames=['*用户名','*密码','*重复密码','真实姓名','手机号','QQ','e-mail ...

  8. Redis 未授权访问漏洞（附Python脚本）

    0x01 环境搭建 #下载并安装 cd /tmp wget http://download.redis.io/releases/redis-2.8.17.tar.gz tar xzf redis-.t ...

  9. unity2017.4.0f1使用AS3.0的AndroidSDK遇到的问题

    原因: Unity 在编译时会调用 Android SDK tools 中的 android 命令,而在新版本的 Android SDK tools 中,android这个命令已经废弃了,导致 Uni ...

  10. 说说C与汇编之间的互相联系（转）

    在嵌入式系统开发中,目前使用的主要编程语言是C和汇编,C++已经有相应的编译器,但是现在使用还是比较少的.在稍大规模的嵌入式软件中,例如含有OS,大部分的代码都是用C编写的,主要是因为C语言的结构比较 ...