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. cordova打包遇到Connection timedout:

    在cordova项目打包时,有时候处在公司内网环境,导致有些文件无法下载报下面的错误: A problem occurred configuring root project 'android'. & ...

  2. sh_08_格式化字符串

    sh_08_格式化字符串 info_tuple = ("小明", 21, 1.85) # 格式化字符串后面的 `()` 本质上就是元组 print("%s 年龄是 %d ...

  3. Class constructor FileManager cannot be invoked without 'new' in undefined (line undefined, column undefined)

    解决办法: 1.删除package.json属性devDependencies的 less 和 less-loader ; 2.重新安装 npm i less less-loader --save-d ...

  4. python中super().__init__和类名.__init__的区别

    super().__init__相对于类名.__init__,在单继承上用法基本无差 但在多继承上有区别,super方法能保证每个父类的方法只会执行一次,而使用类名的方法会导致方法被执行多次 多继承时 ...

  5. jsp里面include的静态导入和动态导入的区别

    静态导入就是将被导入页面完全融入到导入的页面中:而动态导入只是在servlet里面插入了include方法,导入的这是被导入页面的body标签里面的内容 1.什么是静态导入? 静态导入指的是,将一个外 ...

  6. jsvnadmin访问一直登陆 找不到用户

    报错:AH01618: user zhangsan not found: /svn/hangzhi 在svnadmin控制台上将用户分好组,不然即使有账户也登不上

  7. 机器学习模型解释工具-Lime

    本篇文章转载于LIME:一种解释机器学习模型的方法 该文章介绍了一种模型对单个样本解释分类结果的方法,区别于对整体测试样本的评价指标准确率.召回率等,Lime为具体某个样本的分类结果做出解释,直观地表 ...

  8. jquery实现对象数组 筛选出每条记录中的特定属性字段 及根据某个属性值筛选出指定的元素

    jquery实现对象数组 筛选出每条记录中的特定属性字段 直接上图: 源码: /** * 对后端返回的数据,筛选出符合报表的列项,多余的列项去除 */ function filterParams(da ...

  9. vue动态构造下拉

    在点击菜单的进入后台初始化方法 @RequestMapping("/init") public String init(@ModelAttribute("response ...

  10. LeetCode 5——最长回文子串

    1. 题目 2. 解答 我们定义状态 state[i][j] 表示子串 s[i, j] 是否为回文子串,如果 s[i, j] 为回文子串,并且有 s[i-1] == s[j+1],那么 s[i-1, ...