介绍

这个系列记录自己学习Vue的过程.

Vue官方不推荐新手直接使用 vue-cli,所以前面这几天都是根据官方文档学习.

步骤

  1. 新建一个html文件.

  2. 在html中导入vue.js依赖.

     <head>
    
 <meta charset="utf-8">
    
 <title>firstvue</title>
    
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
 <!-- 生产环境版本，优化了尺寸和速度 -->
    
 <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    
 </head>

  3. 现在就可以照着官方的例子学习了.

例子

声明式渲染

数据和 DOM 建立了关联,修改了js中data的值,DOM也会发生变化.

  1. Hello Vue

     <div id="app">
    
     {{ message }}
    
 </div>

    JS代码：

     var app = new Vue({
    
     el: '#app',
    
     data: {
    
         message: 'Hello Vue!'
    
     }
    
 })

  2. v-bind 指令[1],作用是:鼠标停留几秒,会有提示信息.

     <div id="app-2">
    
     <span v-bind:title="message">
    
         鼠标悬停几秒钟查看此处动态绑定的提示信息！
    
     </span>
    
 </div>

    JS代码：

     var app2 = new Vue({
    
     el: '#app-2',
    
     data: {
    
         message: '页面加载于 ' + new Date().toLocaleString()
    
     }
    
 })

条件与循环

  1. 控制元素显示 使用 v-if，seen的值决定是否显示.

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

    JS代码：

     var app3 = new Vue({
    
     el: "#app-3",
    
     data: {
    
         seen: true
    
     }
    
 })

  2. 循环 使用v-for ,在控制台输入app4.todos.push({text: 'push text'}),列表添加一个项

     <div id="app-4">
    
     <ol>
    
         <li v-for="todo in todos">
    
             {{ todo.text }}
    
         </li>
    
     </ol>
    
 </div>

    JS代码：

     var app4 = new Vue({
    
     el: "#app-4",
    
     data: {
    
         todos: [
    
             { text: '学习Vue' },
    
             { text: '整个项目' },
    
             { text: '完成毕设' }
    
         ]
    
     }
    
 })

处理用户输入

v-on指令添加一个事件监听器

<div id="app-5">

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

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

</div>

JS代码：

var app5 = new Vue({

    el: '#app-5',

    data: {

        message: 'Hello Vue.js!'

    },

    methods: {

        reverseMessage: function(){

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

        }

    }

})

v-model 轻松实现表单输入和应用状态之间的双向绑定.

<div id="app-6">

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

    <input v-model="message">

</div>

JS代码：

var app6 = new Vue({

    el: '#app-6',

    data: {

        message: 'Hello Vue!'

    }

})

组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

<div id="app-7">

    <ol>

        <!--

        现在我们为每个 todo-item 提供 todo 对象

        todo 对象是变量，即其内容可以是动态的。

        我们也需要为每个组件提供一个“key”，稍后再

        作详细解释。

        -->

        <todo-item

            v-for="item in groceryList"

            v-bind:todo="item"

            v-bind:key="item.id"

        ></todo-item>

    </ol>

</div>

JS代码：

Vue.component('todo-item', {

    // todo-item 组件现在接受一个

    // "prop"，类似与一个自定义特性。

    // 这个prop 名为todo。

    props: ['todo'],

    template: '<li>{{ todo.text }}</li>'

})

var app7 = new Vue({

    el: '#app-7',

    data: {

        groceryList: [

            { id: 0, text: '蔬菜' },

            { id: 1, text: '奶酪' },

            { id: 2, text: '随便其它什么人吃的东西' }

        ]

    }

})

(假想)大型应用模板

<div id="app">

<app-nav></app-nav>

<app-view>

    <app-sidebar></app-sidebar>

    <app-content></app-content>

</app-view>

</div>

源码下载

https://www.lanzous.com/b00t79wkd

密码:Vue01

注解

el：对应div中的id

data：存放数据

methods: 存放方法

  1. 指令是Vue提供的特殊特性,指令带有前缀 v-. ↩︎

Vue学习 Day01的更多相关文章

  1. vue学习day01

    什么是 vue 构建用户界面 用 vue 往 html 页面中填充数据,非常的方便 框架 框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能! 要学习 vue,就是在学习 vue ...

  2. vue学习-day01（vue指令）

    目录: 1.什么是vue.js    2.为什么要学习前端的流行框架    3.框架和库的区别    4.后端MVC和前端的MVVM的区别    5.vue.js的基本代码--hollo world代 ...

  3. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  4. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  5. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  6. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  7. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  8. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  9. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

随机推荐

  1. php 文件追加写入

    //追加写入 file_put_contents('xml.text',json_encode($postObj,JSON_FORCE_OBJECT).PHP_EOL,FILE_APPEND);

  2. 《深入理解java虚拟机》读书笔记五——第六章

    第六章 类文件结构 1.无关性的基石 各种不同平台的虚拟机与所有平台都统一使用程序存储格式——字节码是构成平台无关的基石. 实现语言无关性的基础仍然是虚拟机和字节码存储格式,Java虚拟机不和包括Ja ...

  3. [AtCoder Code Festival 2017 QualB D/At3575] 101 to 010 - dp

    [Atcoder Code Festival 2017 QualB/At3575] 101 to 010 有一个01序列,每次可以选出一个101,使其变成010,问最优策略下能操作几次? 考虑像 11 ...

  4. Redis 数据库使用和搭建

    1.redis中文网 http://www.redis.cn/documentation.html 2.数据类型介绍 http://redis.cn/topics/data-types-intro.h ...

  5. 2级迁移类Q201-Oracle RAC 到单机RMAN迁移（同字节序）非公

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  6. xmlns:android="http://schemas.android.com/apk/res/android 这句话的作用

    xmlns:android="http://schemas.android.com/apk/res/android 有了这句话,你就可以alt+/作为提示,提示你输入什么,不该输入什么,什么 ...

  7. Chrome 提标 您的浏览器限制了第三方Cookie...解决方法

    最近升级Chrome后会出现  您的浏览器限制了第三方Cookie,这将影响您正常登录,您可以更改浏览器的隐私设置,解除限制后重试. 解决方法: chrome://flags/ 把这句复制到浏览器回车 ...

  8. centos下配置mongodb定期备份

    https://brickyang.github.io/2017/03/02/Linux-%E8%87%AA%E5%8A%A8%E5%A4%87%E4%BB%BD-MongoDB/ 1.创建备份脚本 ...

  9. Install macOS High Sierra on Any Supported Intel-based PC

    1.准备制作安装盘前的准备https://www.tonymacx86.com/threads/unibeast-install-macos-high-sierra-on-any-supported- ...

  10. pybind11简介

    python调用C/C++有不少的方法,如boost.python, swig, ctypes, pybind11等,这些方法有繁有简,而pybind11的优点是对C++ 11支持很好,API比较简单 ...