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. CSS3 3D转换——rotateX()，rotateY()，rotateZ()

    CSS3 允许使用 3D 转换来对元素进行格式化. ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webk ...

  2. CodeForces 1245D Shichikuji and Power Grid

    cf题面 解题思路 比赛过程中想了一个贪心--把所有城市按照自建代价排序,排在第一的城市肯定自建,之后依次判断排在后面的城市要自建还是要连接前面的.这么做WA13了(第一次忘开long longWA4 ...

  3. 利用gephi作人物网络图

    一.先利用word2vec训练数据得到模型 a.利用jieba对文本进行分词,并只提取词性为人名的词,去除分词长度为1和大于4的词 b.利用word2vec训练分词后的文本,并存储 c.利用训练后的模 ...

  4. kafka offset存储

    存储方式 方式 方式来源 存储位置 自动提交 kafka kafka 异步提交 kafka kafka checkpoint spark streaming hdfs hbase存储 程序开发 hba ...

  5. Java中String.getBytes()

    在Java中,String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组.这个表示在不通OS下,返回的东西不一样!  String.getBytes(String decode) ...

  6. 事件源event.target

    今天在了解检测浏览器是否能播放不同类型的视频时发现以下代码 <script> function supportType(e,vidType,codType) { myVid=documen ...

  7. hibernarte主键生成机制

    1. 主键(id)生成策略 1) assigned 主键由外部程序负责生成,在 save() 之前指定. 2) hilo 通过hi/lo 算法实现的主键生成机制,需要额外的数据库表或字段提供高位值来源 ...

  8. 《信息安全系统设计基础》--Myod

    Myod 回顾Makefile 任务详情 复习c文件处理内容 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 main与其他分开,制作静态库和动态库 编写Mak ...

  9. python3笔记一：python基础知识

    一:学习内容 注释 输入输出 标识符 变量和常量 二:注释 1. 单行注释 #:一个井号,代表我注释了这一行 2.多行注释 ''' ''':注释多行,三个单引号 3.多行注释 "" ...

  10. R实现pm2.5地图数据展示

    使用rvest包抓取pm2.5静态页面数据,使用leafletCN包实现pm2.5数据的地图展示,代码如下所示: library(rvest) library(leafletCN) Sys.setlo ...