介绍

这个系列记录自己学习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. Windows新建域时 administrator账户密码不符合要求解决办法~!

    解决方法  在cmd 命令行中 输入 net user administrator /passwordreq:yes

  2. Struts2-057远程代码执行漏洞(s2-057/CVE-2018-11776)复现

    参考了大佬的链接:https://github.com/jas502n/St2-057 00x01前言 Apache Struts是美国阿帕奇(Apache)软件基金会负责维护的一个开源项目,是一套用 ...

  3. AcWing 6. 多重背包问题 III

    //f[i,j] 所有只从前i块能量石中选,且总体积恰好为j的方案数 #include <iostream> #include <algorithm> #include < ...

  4. eclipse配置tomcat，并部署一个Java web项目到tomcat上

    引用链接:https://blog.csdn.net/cincoutcin/article/details/79408484 eclipse配置tomcat 1.windows——preference ...

  5. babel 的简单使用

    之前在项目中使用.balelrc文件,但是一直不知道具体怎么使用,就知道可以将es6语法转码为es5语法. 今天就简单的做个例子,也算是记录一下困扰了好久的问题. 转码步骤: 首先在项目的目录中安装B ...

  6. JAVA类（内部类、匿名内部类、异常、自定义异常）

    内部类 package AA; public class 类 { ; StringBuffer dee=new StringBuffer(); public class 成员内部类{ public v ...

  7. Day5 多线程 锁

    synchronized保证操作原子性 这是因为对变量进行读取和写入时,结果要正确,必须保证是原子操作.原子操作是指不能被中断的一个或一系列操作. 通过加锁和解锁的操作,就能保证3条指令总是在一个线程 ...

  8. pycharm运行RF脚本时的环境搭建与配置

    1.安装pycharm:2.file->setting,下载插件intellibot,重启pycharm:3.配置识别RF类型文件,filefile->editor->file ty ...

  9. 网格布局 grid(1)

    目录 网格布局 grid(1) 实现方式 对容器设置的属性 行高与列宽的设置 单元格的间距 内容的位置 表格在容器的位置 兼容问题 网格布局 grid(1) 实现方式 display:grid 也可成 ...

  10. Javascript数组与字符串常用api

    目录 javaScript(api学习) 数组有关的api 创建数组 数组的增删改查 indexOf(); push(),pop(),unshift(),shift() forEach() map() ...