介绍

这个系列记录自己学习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. selenium--find_element_by_xpath()方法汇总

    一.从根目录/开始 有点像Linux的文件查看,/代表根目录,一级一级的查找,直接子节点,相当于css_selector中的>号/html/body/div/p 二.根据元素属性选择: 查找具体 ...

  2. ssh配置跳板机-带密钥

    ssh配置跳板机堡垒机带密钥 ~/.ssh/config 添加以下配置: # 跳板机地址 Host jumper HostName jumper.com User jumper port 23333 ...

  3. 对主定理(Master Theorem)的理解

    前言 虽说在学OI的时候学到了非常多的有递归结构的算法或方法,也很清楚他们的复杂度,但更多时候只是能够大概脑补这些方法为什么是这个复杂度,而从未从定理的角度去严格证明他们.因此借着这个机会把主定理整个 ...

  4. 我的第一个Maven Helloworld

    使用MAVEN创建项目可以有两种方式进行创建,第一种,使用mvn命令创建Maven项目,第二种,使用eclipse创建Maven项目. 在创建Maven项目之前,我们需要安装maven,并和配置JDK ...

  5. many connection errors,更改max_connection_errors的值

    https://www.cnblogs.com/tonyccc/p/11496101.html https://blog.csdn.net/li_li_lin/article/details/7276 ...

  6. MyEclipse-2017破解过程

    下载 myeclipse2017百度云下载路径: 链接:https://pan.baidu.com/s/1wQYwO2zrUvbbUcjCB5B8IQ 密码:6igu myeclipse2017破解文 ...

  7. Unity网络通讯（一）获取计算机的MAC地址

    1 string GetMac() { string mac = ""; mac = GetMacAddressBySendARP(); return mac; } [DllImp ...

  8. windows重建ESP分区修复引导

    开始 装在虚拟机里面的win7实在是太卡了,所以准备把虚拟磁盘文件复制到固态硬盘,,,但是,,, 我只有128GB固态... 那就只能卸载之前通宵装的linux 好气 首先需要装进入PE UEFI + ...

  9. liunx 使用crontab定时任务+shell脚本删除tomcat日志elasticsearch日志索引

    由于过多的日志很占用磁盘空间,今天经理让我写一个脚本删除多余的日志.和es索引 定时删除试根据crontab+shell脚本实现的 crontab配置目录 /var/spool/cron/ 该目录下存 ...

  10. 解决wxpy获取不到指定群聊对象的情况

    我们可以通过Bot.friends 以及Bot.groups 来获取到所有的好友以及聊天群,这里需要注意的是,聊天群需要保存到通讯录中,不然可能会出现找不到聊天群的情况. 摘自:http://www. ...