1.声明式渲染

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div id="app-2">

    <span v-bind:title="message">

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

    </span>

</div>

</body>

<script>

    var app2 = new Vue({

        el:'#app-2',

        data:{

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

        }

    })

</script>

</html>

2.v-if判断是否显示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

    <div id="app-3">

        <p v-if="seen">现在你看到我了</p>

    </div>

</body>

<script>

    var app3 = new Vue({

        el:'#app-3',

        data:{

            seen:true

        }

    })

//    app3.seen=false

</script>

</html>

3.v-for遍历渲染

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div id="app-4">

    <ol>

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

            {{todo.text}}

        </li>

    </ol>

</div>

</body>

<script>

    var app4 = new Vue({

        el:'#app-4',

        data:{

            todos:[

                {text:'学习JavaScript'},

                {text:'学习Vue'},

                {text:'学习Flask'}

            ]

        }

    })

    app4.todos.push({ text: '新项目' })

</script>

</html>

4.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-5">

        <p>{{message}}</p>

        <button v-on:click="reverseMessage">逆转消息</button>

    </div>

</body>

<script>

    var app5 = new Vue({

        el:'#app-5',

        data:{

            message:'hello Vue.js'

        },

        methods:{

            reverseMessage:function () {

                //逆转消息

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

            }

        }

    })

</script>

</html>

5.v-model处理用户输入数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div id="app-6">

    <p>{{message}}</p>

    <input v-model="message">

</div>

</body>

<script>

    var app6 = new Vue({

        el:'#app-6',

        data:{

            message:'hello Vue!'

        }

    })

</script>

</html>

6.v-bind处理标签属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div id="app-7">

    <ol>

    <todo-item

                v-for="item in groceryList"

               v-bind:key="item.id"

                v-bind:todo="item"

               >

    </todo-item>

</ol>

</div>

</body>

<script>

    Vue.component('todo-item', {

        props: ['todo','key'],

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

    });

    var app7 = new Vue({

        el:'#app-7',

        data:{

            groceryList:[

                {id:0,text:'蔬菜'},

                {id:1,text:'水果'},

                {id:2,text:'肉类'},

            ]

        }

    })

</script>

</html>

Vue.js的初步使用的更多相关文章

  1. 使用eclipse初步学习vue.js的基本操作 ①

    一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...

  2. 使用eclipse初步学习vue.js基础==》v-for的使用 ②

    一.步骤演示 1. 新建一个jsp文件 2. 把vue.js放到Web的js目录下 3. 在jsp中引入vue.js <script src="${pageContext.reques ...

  3. 初步学习vue.js

    vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...

  4. 对于vue.js初步了解

    由于本人做的是javaWeb的开发,对于前端的了解还是有限,今天对于vue.js了解了下(主要是看官方api),把自己的心得说一下,希望各位大神可以补充,谢谢   http://www.runoob. ...

  5. vue.js 初步学习

    跟着b站上的视频来学 首先什么是vue.js? 跟着b站上视频来学:(oﾟvﾟ)ノ <!DOCTYPE html> <html lang="en"> < ...

  6. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  7. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  8. vue.js随笔记---初识Vue.js

    1.基础要求: 1.1 HTML CSS JAVASCRIPT 1.2 模块化基础 1.3 Es6初步了解 2.vue.js 轻量级的MVVM模式框架,他同时吸收了recat和angular的优点,他 ...

  9. 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

    Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...

随机推荐

  1. js 浮点数相加 变成字符串 解决方案

    var count = 0; count+=Number(parseFloat(value[i]['sla']).toFixed(2)); 数字相加的时候最好使用Number转换一下

  2. 论文阅读笔记二十七：Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks（CVPR 2016）

    论文源址:https://arxiv.org/abs/1506.01497 tensorflow代码:https://github.com/endernewton/tf-faster-rcnn 室友对 ...

  3. spring中的xml配置出处

  4. Paddington2

  5. 使用python调用shell判断当前进程是否存在

    使用subprocess模块判断当前进程是否存在 #! /usr/bin/env python import subprocess res = subprocess.Popen(r'ps -ef |g ...

  6. MySql-8.0.12 安装教程

    MySql-8.0.12 安装教程随笔https://www.cnblogs.com/CrazyDemo/p/9409995.html MySQL 安装https://m.runoob.com/mys ...

  7. ElasticSearch搜索解析

    这篇介绍稍多,篇幅可能有点多,下面会针对一些重要的点做一些小测试 搜索返回文档解析 hits搜索返回的结果中最重要的一部分其中包含了 索引信息(_index,_type,_index,_source, ...

  8. POJ 2914 Minimum Cut【最小割 Stoer-Wangner】

    题意:求全局最小割 不能用网络流求最小割,枚举举汇点要O(n),最短增广路最大流算法求最大流是O(n2m)复杂度,在复杂网络中O(m)=O(n2),算法总复杂度就是O(n5):就算你用其他求最大流的算 ...

  9. Linux系统监控命令及定位Java线程

    1.PID.TID的区分 uid是user id,即用户id,root用户的uid是0,0为最高权限,gid是group id,用户组id,使用 id 命令可以很简单的通过用户名查看UID.GID:~ ...

  10. [转]如何将mysql表结构导出成Excel格式的（并带备注）

    方法一: 1.使用一个MySQL管理工具:SQLyog,点击菜单栏“数据库”下拉的最后一项: 导出的格式如下: 2.要想转成Excel格式的只需手动将该表复制到Excel中去. 方法二: 1.以下用的 ...