Vue.js起步

Vue.js介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

起步

导入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

文本插值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        {{ message }}

    </div>

    <script>

        var app = new Vue({

            el: '#app',

            data: {

                message: 'Hello Vue!'

            }

        })

    </script>

</body>

</html>

结果

1.现在数据和dom创建了关联

2.所有的东西都是响应式的

绑定元素特性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app-2">

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

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

        </span>

    </div>

    <script>

        var app2 = new Vue({

            el: '#app-2',

            data: {

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

            }

        })

    </script>

</body>

</html>

v-bind特性称为指令，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致



再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。





v-bind特性称为指令:将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致

条件与循环

条件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app-3">

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

    </div>

    <script>

        var app3=new Vue({

            el:'#app-3',

            data:{

                seen:true

            }

        })

    </script>

</body>

</html>

不仅可以将数据绑定到DOM文本或者特性，还可以绑定到DOM结构。

除此之外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

循环

v-for命令渲染一个任务列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app-4">

        <ol>

            <li v-for="todo in todos">{{todo.text}}</li><!--显示出每一项中的text属性-->

        </ol><!--v-for命令类似于python中的for...in语法-->

    </div>

    <script>

        var app4=new Vue({

            el:"#app-4",

            data:{

                todos:[

                    {text:"学习javascript"},

                    {text:"学习Vue"},

                    {text:"整个牛项目"}

                ]

            }

        })

    </script>

</body>

</html>

在控制台输入app4.todos.push(text:"新项目")

结果



处理用户输入

v-on指令

v-on指令添加一个事件监视器，通过它调用在vue实例中定义的方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app-5">

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

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

    </div>

    <script>

        var app5=new Vue({

            el:'#app-5',

            data:{

                message:"Hello Vue.js!"

            },

            methods:{

                reverseMessage:function(){

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

                }

            }

        })

    </script>

</body>

</html>

注意:reverseMessage方法中更新了应用的状态，但是并没有触碰dom,所有的DOM操作都是由Vue实现的，编写代码时候只需要关注逻辑层就可以了

v-model指令

功能:实现表单输入和应用状态的双向的绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app-6">

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

        <input v-model="message">

    </div>

    <script>

        var app6=new Vue({

            el:"#app-6",

            data:{

                message:"Hello Vue.js!"

            }

        })

    </script>

</body>

</html>

同步绑定就是，当input栏输入改变的时候，message和它同时改变

Vue.js官方文档学习笔记(一)起步篇的更多相关文章

  1. Vue.js官方文档学习笔记(三)创建Vue实例

    创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...

  2. Vue.js官方文档学习笔记(二)组件化应用的构建

    组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...

  3. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  4. pm2 官方文档 学习笔记

    一.安装 1.安装 npm install pm2 -g 2.更新 npm install pm2 -g && pm2 update pm2 update 是为了刷新 PM2 的守护进 ...

  5. Vue2.0 官方文档学习笔记

    VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...

  6. Less 官方文档学习笔记

    LESS 是css的一种扩展,它的编辑器是基于node.js 的less.js,将less文件编译成css文件(可压缩). 其中的概念: 变量:定义变量来代替某个值,只能编译一次,本质是“常量”.例如 ...

  7. vue.js官方文档 PDF

    链接:https://pan.baidu.com/s/1jHMBb5W 密码:gsks

  8. Spark监控官方文档学习笔记

    任务的监控和使用 有几种方式监控spark应用:Web UI,指标和外部方法 Web接口 每个SparkContext都会启动一个web UI,默认是4040端口,用来展示一些信息: 一系列调度的st ...

  9. Spring 4 官方文档学习（十一）Web MVC 框架

    介绍Spring Web MVC 框架 Spring Web MVC的特性 其他MVC实现的可插拔性 DispatcherServlet 在WebApplicationContext中的特殊的bean ...

随机推荐

  1. PHP教程-反序列化的方法

    序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性.兄弟连PHP培训() 1. ...

  2. KMP模版 && KMP求子串在主串出现的次数模版

    求取出现的次数 :  #include<bits/stdc++.h> ; char mo[maxn], str[maxn];///mo为模式串.str为主串 int next[maxn]; ...

  3. Lucas定理初探

    1.1 问题引入 已知\(p\)是一质数,求\(\dbinom{n}{m}\pmod{p}\). 关于组合数,它和排列数都是组合数学中的重要概念.这里会张贴有关这两个数的部分内容. 由于Lucas定理 ...

  4. Android 造炫目的圆形菜单 秒秒钟高仿建行圆形菜单

    1.概述 今天打开建行看存款,一看伤心欲绝,再看:我擦,这个圆形菜单挺炫.于是,为了掩盖我悲痛的心情,我决定是实现这个效果.好了,其实还有个原因,记得我初学android那会我做的应用被鄙视了,说我的 ...

  5. microsoft office 2010 visio激活

    office2010 tookit这款绿色的软件进行Visio2010激活 http://jingyan.baidu.com/article/4f34706ecae169e387b56dd1.html

  6. maven web项目中运行stucts2报404的解决方案

    从这篇文章看见的https://www.cnblogs.com/xxqxxq/p/5938821.html 1.将stucts.xml中所有<action>全部注释掉,重新运行 如果运行成 ...

  7. Docker入门-介绍和安装

    Docker容器 Docker是什么 Docker最初是dotCloud公司创建人Solomon Hykes在法国期间发起的一个公司内部项目,它是基于dotCloud公司多年云服务技术的一次革新,并于 ...

  8. 怎样查看explorer里运行的DLL文件

    怎样查看explorer里运行的DLL文件 tasklist /m /fi "imagename eq explorer.exe">a.txt 列出explorer用的所有模 ...

  9. defineProperty和defineProperties介绍

    v-model 实现的原理 angular 是 mvc 的实现原理,ng-model 是靠脏值检测实现的 脏值检测:for 循环一个个对比 vue 靠的是数据劫持 和 发布者,订阅者模式 数据劫持:O ...

  10. win下gvim或者linux下的vim安装vundle都适用的配置文件 - 在当前目录及其子目录下**, 的所有文件* 中, 搜索当前光标所在的单词

    gvim下的普通配置: if v:lang =~ "utf8$" || v:lang =~ "UTF-8$" set fileencodings=utf-8,g ...