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官方文档学习笔记(一)起步篇的更多相关文章

Vue.js官方文档学习笔记(三)创建Vue实例
创建Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发当创建一个 Vue 实 ...
Vue.js官方文档学习笔记(二)组件化应用的构建
组件化应用的构建组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...
vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
pm2 官方文档学习笔记
一.安装 1.安装 npm install pm2 -g 2.更新 npm install pm2 -g && pm2 update pm2 update 是为了刷新 PM2 的守护进 ...
Vue2.0 官方文档学习笔记
VUE2.0官方文档基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...
Less 官方文档学习笔记
LESS 是css的一种扩展,它的编辑器是基于node.js 的less.js,将less文件编译成css文件(可压缩). 其中的概念: 变量:定义变量来代替某个值,只能编译一次,本质是“常量”.例如 ...
vue.js官方文档 PDF
链接:https://pan.baidu.com/s/1jHMBb5W 密码:gsks
Spark监控官方文档学习笔记
任务的监控和使用有几种方式监控spark应用:Web UI,指标和外部方法 Web接口每个SparkContext都会启动一个web UI,默认是4040端口,用来展示一些信息: 一系列调度的st ...
Spring 4 官方文档学习（十一）Web MVC 框架
介绍Spring Web MVC 框架 Spring Web MVC的特性其他MVC实现的可插拔性 DispatcherServlet 在WebApplicationContext中的特殊的bean ...

随机推荐

Codeforces Round #578 (Div. 2) Solution
Problem A Hotelier 直接模拟即可~~ 复杂度是$O(10 \times n)$ # include<bits/stdc++.h> using namespace std; ...
CentOS7 服务器上如何安装python3
1.官网下载python3的源码包网址:https://www.python.org/ 进去之后点击导航栏的Downloads,也可以鼠标放到Downloads上弹出菜单选择Source code, ...
关于多个py文件生成一个可运行exe文件（用pyinstaller）
首先下载Pyinstaller,在cmd命令下执行:pip installer Pyinstaller,不需要关心安装在哪然后把所有相关的py文件都放在一个目录下在那个目录下执行cmd命令:pyi ...
17.Python print()函数高级用法
前面使用 print() 函数时,都只输出了一个变量,但实际上 print() 函数完全可以同时输出多个变量,而且它具有更多丰富的功能. print() 函数的详细语法格式如下: print (val ...
Android_(游戏)打飞机06：后续
(游戏)打飞机01:前言传送门 (游戏)打飞机02:游戏背景滚动传送门 (游戏)打飞机03:控制玩家飞机传送门 (游戏)打飞机04:绘画敌机.添加子弹传送门 (游戏)打飞机05:处理子弹, ...
关于MySQL 处理重复数据
统计重复数据以下我们将统计表中 first_name 和 last_name的重复记录数: mysql> SELECT COUNT(*) as repetitions, last_name, ...
MySort(选做)的实现
MySort(选做)的实现题目内容注意:研究sort的其他功能,要能改的动代码,需要答辩模拟实现Linux下Sort -t : -k 2的功能. 要有伪代码,产品代码,测试代码(注意测试用例的设 ...
【python】windows更改jupyter notebook（ipython）的默认打开工作路径
写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...
httpparase + httpclient 的运用
这篇文章介绍了 HtmlParser 开源包和 HttpClient 开源包的使用,在此基础上实现了一个简易的网络爬虫 (Crawler),来说明如何使用 HtmlParser 根据需要处理 Inte ...
Linux 下 *.tar.gz 文件解压缩命令及错误处理
1.压缩命令: 命令格式: tar -zcvf 压缩文件名 .tar.gz 被压缩文件名可先切换到当前目录下,压缩文件名和被压缩文件名都可加入路径. 2.解压缩命令: 命令格式: tar -zxvf ...

Vue.js官方文档学习笔记(一)起步篇