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. vue用webpack打包时引入es2015插件

    1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 ...

  2. Appium Python API 中文版

    Appium_Python_Api文档 1.contextscontexts(self): Returns the contexts within the current session. 返回当前会 ...

  3. IDEA中每次拷贝一个项目的时候必须标记一下配置文件resources,否则报错

  4. HDU 1573 X问题（中国剩余定理标准解法）

    X问题 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  5. Hive启动失败

    启动hive报如下错误 [root@node01 conf]# hive19/03/31 09:57:31 WARN conf.HiveConf: HiveConf of name hive.meta ...

  6. Java集合源码学习（二）ArrayList

    1.关于ArrayList ArrayList直接继承AbstractList,实现了List. RandomAccess.Cloneable.Serializable接口,为什么叫"Arr ...

  7. 【SpringBoot】常用注解

    @EnableAutoConfiguration 启动自动装载:使用了这个注解之后,所有引入的jar的starters都会被自动注入.这个类的设计就是为starter工作的. @RestControl ...

  8. [ZJOI2006]皇帝的烦恼

    题解: 具有单调性的题目还是要多想想二分答案 不二分答案暴力dp是n^3的 非常不优秀 二分答案之后就比较好做 mx[i],nx[i]表示最多/最少几个与a[1]相同 代码: #include < ...

  9. 背包的一些idea

    题解: 给出n个物品,每次能使用l-r之间的物品,问能不能表示出k,m次询问 k<=100,m,n=1e5 想了线段树分治 发现是k^2(n+m)logn claris告诉我可以直接分治 我们对 ...

  10. python sqlite3查看数据库所有表(table)

    #coding:utf-8 import sqlite3 ''' sqlite3存在系统表sqlite_master,结构如下: sqlite_master( type TEXT,      #类型: ...