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. unzip文件解压

    1.记录下,遇到.zip的安装包,指定解压到某个地方 格式:unzip      压缩包名.zip  -d   存放路径  

  2. HTTP 599: SSL certificate problem: unable to get local issuer certificate错误

    自己在用 PySpider 框架爬虫运行代码后时出现 HTTP 599: SSL certificate problem: unable to get local issuer certificate ...

  3. 微信小程序--代码构成---WXSS 样式

    WXSS 样式 WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 新增了尺寸单位.在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一 ...

  4. last与lastb命令 读取的日志文件

    在linux系统中,last与lastb命令用来列出目前与过去登录系统的用户相关信息.指令英文原义: last, lastb - show listing of last logged in user ...

  5. 数据库vertica 脚本方式的导入导出

    需要进入vsql下的: 导入: copy emp from '/tmp/emp.csv' DELIMITER ',' ESCAPE AS '\' ENCLOSED BY '"' DIRECT ...

  6. Thinkphp框架网站 nginx环境 访问页面access denied

    今日不熟一个tiinkphp框架网站的时候,由于服务器环境是centos6.5+nginx1.8,已经运行php商城项目很正常, 本以为一切比较简单,直接新建了项目文件夹,xftp上传了程序,并配置n ...

  7. 【AtCoder】AGC014

    AGC014 链接 A - Cookie Exchanges 发现两个数之间的差会逐渐缩小,所以只要不是三个数都相同,那么log次左右一定会得到答案 #include <bits/stdc++. ...

  8. keepalived + glusterfs实现高可用

    此处暂时不介绍原理乱七八糟,边做别记录下操作. 1.服务器修改网卡的名字为eth0 .将device和name都改成eth0 vim /etc/sysconfig/network-scripts/if ...

  9. Codeforces 264C Choosing Balls 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF264C.html 题目传送门 - CF264C 题意 给定一个有 $n$ 个元素的序列,序列的每一个元素是个 ...

  10. mysql 备份 恢复

    mysqldump -h127.0.0.1 -uroot -p123456 --databases dbname > e:/mysqlbak/dbname.dump不用新建数据库mysql -h ...