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 ...

随机推荐

51 Nod 一维战舰
1521 一维战舰题目来源: CodeForces 基准时间限制:1 秒空间限制:131072 KB 分值: 10 难度:2级算法题收藏关注爱丽丝和鲍博喜欢玩一维战舰的游戏.他们在一行 ...
（Java多线程系列三）线程间通讯
Java多线程间通讯多线程之间通讯,其实就是多个线程在操作同一个资源,但是操作的动作不同. 1.使用wait()和notify()方法在线程中通讯需求:第一个线程写入(input)用户,另一个线程 ...
Housewife Wind
Housewife Wind 参考博客:POJ2763 Housewife Wind(树剖+线段树) 差不多是直接套线段树+树剖的板子,但是也有一些需要注意的地方建树: void build() { ...
10个PHP代码片段
还记得CSDN研发频道此前发表过的一篇<可以直接拿来用的15个jQuery代码片段>吗?本文笔者将继续为你奉上10个超级有用的PHP代码片段. PHP是一种HTML内嵌式的语言,是一种在服 ...
后盾网lavarel视频项目---5、淘宝镜像cnpm的原理及如何使用
后盾网lavarel视频项目---5.淘宝镜像cnpm的原理及如何使用一.总结一句话总结: 原理:把npm上面的所有软件copy过来使用:npm install -g cnpm --regist ...
MySQL 建表时 date 类型的默认值设置
在执行下面 SQL 语句时发现报错 CREATE TABLE `jc_site_access_pages` ( `access_date` date NOT NULL DEFAULT '0000-00 ...
CSS二级菜单
0.需求:当鼠标hover到按钮上时,出现下拉菜单导航条. 1.问题拆解: (1)HTML应该如何组织比较方便合理因为题中要求下拉菜单位于按钮的正下方,可以使用列表<li>中嵌套无序列表 ...
ceph集群添加osd
获取osd的ID 这个操作是在管理节点上执行 [root@node-4 osd]# ceph osd create 2 对磁盘做处理 [root@node-4 ~]# parted /dev/sdb ...
linux使用df查看硬盘使用率
df 是来自于coreutils 软件包,系统安装时,就自带的:我们通过这个命令可以查看磁盘的使用情况以及文件系统被挂载的位置: df -lh [root@iZ28u0bdecbZ ~]# df -h ...
在DBGrid中，按ctrl+Delete不让删除,怎么实现
DBGrid的Options中的dgConfirmDelete改为:False;在DBGrid所连接的DataSet的BeforeDelete事件中写:Abort; ^_^

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