介绍

这个系列记录自己学习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. PGET，一个简单、易用的并行获取数据框架

    使用场景 当我们的服务收到一个请求后,需要大量调用下游服务获取业务数据,然后对数据进行转换.计算后,响应给请求方. 如果我们采用串行获取下游数据,势必会增加响应时长,降低接口的qps.如果是并行获取下 ...

  2. java学习笔记之IO编程—File文件操作类

    1. File类说明 在Java语言里面提供有对于文件操作系统操作的支持,而这个支持就在java.io.File类中进行了定义,也就是说在整个java.io包里面,File类是唯一一个与文件本身操作( ...

  3. 基于EFCore3.0+Dapper 封装Repository

    Wei.Repository 基于EFCore3.0+Dapper 封装Repository,实现UnitOfWork,提供基本的CURD操作,可直接注入泛型Repository,也可以继承Repos ...

  4. C 库函数 - fmod()

    C 库函数 - fmod() 转自: C 标准库 - <math.h> 描述 C 库函数 double fmod(double x, double y) 返回 x 除以 y 的余数. 声明 ...

  5. R 常用清洗函数汇总

    目录 1.which() 2.unique() 3.dplyr包 select() filter() arrange() group_by() mutate() transmutate() summa ...

  6. 0002 PyCharm设置

    1 设置编码格式 File/Settings/Editor/File Encodings 2 设置字体 File/Settings/Editor/Font 3 鼠标滚轮改变编辑器字体大小 File/S ...

  7. 1、安装gitlab

    1.安装Gitlab Gitlab分为社区版和企业版(收费),这里安装的是ce社区版本 方式一: Gitlab官方有提供好的rpm包仓库,所以采用yum安装即可. [root@localhost ~] ...

  8. openstack入门及应用

    一.OpenStack云计算的介绍 (一)云计算的服务类型 IAAS:基础设施即服务,如:云主机 PAAS:平台即服务,如:docker SAAS:软件即服务,如:购买企业邮箱,CDN 传统IT IA ...

  9. react中用swiper实现大图功能

    1.引入Swiper(用的是4.5.0版本)      import Swiper from 'swiper';      //引入样式,还可以加上自己的样式      import '../../s ...

  10. EF CodeFirst简介、默认约定、数据库初始化策略

    CodeFirst 工作流程 创建或修改领域类-->使用数据注解或者Fluent API来配置领域类-->使用自动数据库迁移技术或者基于代码的数据库迁移技术来创建数据库. CodeFirs ...