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. log4j2的配置文件log4j2.xml笔记

    一.背景 最近由于项目的需要,我们把log4j 1.x的版本全部迁移成log4j 2.x 的版本,那随之而来的slf4j整合log4j的配置(使用Slf4j集成Log4j2构建项目日志系统的完美解决方 ...

  2. 创建WIFI热点

    @echo off:beginecho 笔记本做无线WiFi程序(首次使用请先设置WiFi帐户.)echo 1.设置WiFi帐户,请按1echo 2.开启WiFi功能,请按2echo 3.闭关WiFi ...

  3. 微信小程序开发 如何退出当前页面

    默认是在首页 wx.navigateBack({     delta: -1 });     详情参考. https://mp.weixin.qq.com/debug/wxadoc/dev/api/u ...

  4. 饮冰三年-人工智能-Python-16Python基础之迭代器、生成器、装饰器

    一:迭代器: 最大的特点:节省内存 1.1 迭代器协议 a:对象必须提供一个next方法, b:执行方法要么返回迭代中的下一项,要么抛弃一个Stopiteration异常, c:只能向后不能向前. 1 ...

  5. resources中添加配置文件

  6. mysql 简称

    一:DTS(Data Transformation Service) 数据转换服务 大多数组织都使用多种格式和多个位置来存储数据. 为了支持决策.改善系统性能或对现有系统进行升级,经常必须将数据从一个 ...

  7. 【BZOJ1778】[Usaco2010 Hol]Dotp 驱逐猪猡

    题解: 网上有一种复杂的方法..好像复杂度并没有优势就没看 定义f[i]表示i的期望经过次数,f[i]=sigma{f[j]*p/q/du[j]}+(i==1); 然后高斯消元就可以了 最后求出来的f ...

  8. bzoj2961 共点圆 bzoj 4140

    题解: 比较水的一道题 首先我们化简一下式子发现是维护xxo+yyo的最值 显然是用凸包来做 我们可以直接用支持插入删除的凸包 也是nlogn的 因为没有强制在线,我们也可以cdq,考虑前面一半对答案 ...

  9. C# 之 反射性能优化3

    阅读目录 开始 用Delegate优化反射的缺点 用Delegate优化反射的优点 用CodeDOM优化反射的优点 如何用好CodeDOM? 用CodeDOM优化反射的缺点 能不能不使用委托? 根据反 ...

  10. Nginx+Redis+Ehcache大型高并发高可用三层架构总结

    在生产环境中,对于高并发架构,我们知道缓存 是最重要的环节,对于大量的高并发.可以采用三层缓存架构来实现,也就是Nginx+Redis+Ehcache 对于中间件Nginx常来做流量分发,同事ngin ...