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. centos7.4/rehat7.0系统安装

    以下是安装过程:(图解),以下是rehat为例 这里可以改为centos的镜像 之后就可以用了,记得做快照!!! 拓展:分离使用 效果:

  2. 查看CPU 内存 硬盘 网络 查看进程使用的文件 uptime top ps -aux vmstat iostat iotop nload iptraf nethogs

    #安装命令 yum install  sysstat #包含 iostat vmstat yum install iotop yum install  nload yum install iptraf ...

  3. Django_Admin操作

    Django_Admin 创建Django_Admin 管理账户 D:\github\Django_Aadmin>python manage.py createsuperuser Usernam ...

  4. Junit4 IDEA测试学习一

    1.Junit4 下载 https://github.com/junit-team/junit4/releases 4.12 还需要还导入hamcrest-core-1.3.jar 2.IDEA Te ...

  5. DevOps 在公司项目中的实践落地

    原文出处:https://www.cnblogs.com/beef/p/7743594.html ref: [DevOps]团队敏捷开发系列--开山篇 https://www.cnblogs.com/ ...

  6. C# 合并两张图片

    private BitmapSource CombineImage(BitmapSource img1,BitmapSource img2) { var composeImg = new Render ...

  7. 盘点那些Vs中常用到的Tab快捷编码

    1.快速声明for循环:for+Tab 2.快速声明Foreach遍历:foreach+Tab 3.快速定义属性:prop+Tab 4.

  8. noip宝藏

    题解: 我觉得状压比搜索不知道简单到哪里去了.. 为了练习搜索...想了一下这题的搜索.. 然后会发现想想就很容易想到dp.. 最后的搜索大概是这样的 我们会发现有一类搜索都是这样 你会重复(可能是指 ...

  9. 【LGR-052】洛谷9月月赛II（加赛）

    题解: 没打... ab题满世界都过了应该没什么意思 c题是个比较有意思的思维题(先看了题解才会的...) 我们考虑这么一件事情 没钥匙的人出门后 门一定是开着的 他进来的时候,门一定是开着的 其他时 ...

  10. C# 之 反射性能优化1

    反射是一种很重要的技术,然而它与直接调用相比性能要慢很多,因此如何优化反射性能也就成为一个不得不面对的问题. 目前最常见的优化反射性能的方法就是采用委托:用委托的方式调用需要反射调用的方法(或者属性. ...