介绍

这个系列记录自己学习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. vjudge 最大公约数GCD 直接求最大共约束和最小公倍数的指令

    原题链接https://vjudge.net/contest/331993#problem/C 输入2个正整数A,B,求A与B的最大公约数. Input2个数A,B,中间用空格隔开.(1<= A ...

  2. SQLserver 数据类型转换

    1:CAST  方法 CAST(任何有效的表达试  AS 要转换的数据类型 [数据类型的长度,可选]) 例:SELECT  CAST(10000 as varchar(10)) SELECT  CAS ...

  3. 机器学习作业（二）逻辑回归——Matlab实现

    题目太长啦!文档下载[传送门] 第1题 简述:实现逻辑回归. 第1步:加载数据文件: data = load('ex2data1.txt'); X = data(:, [1, 2]); y = dat ...

  4. Nginx配置服务器宕机策略

    Nginx解决服务器宕机问题,Nginx配置服务器宕机策略,如果服务器宕机,会找下一台机器进行访问        配置nginx.cfg配置文件,在映射拦截地址中加入代理地址响应方案 location ...

  5. PP: Neural ordinary differential equations

    Instead of specifying a discrete sequence of hidden layers, we parameterize the derivative of the hi ...

  6. Java基本语法--运算符

    运算符是一种特殊的符号,用以表示数据的运算.赋值和比较等.本篇博客详细介绍Java基本语法中的运算符,主要包括算术运算符.赋值运算符.比较运算符(关系运算符).逻辑运算符.位运算符.三元运算符. Ja ...

  7. Python 序列化与反序列化

    序列化是为了将内存中的字典.列表.集合以及各种对象,保存到一个文件中(字节流).而反序列化是将字节流转化回原始的对象的一个过程. json库 序列化:json.dumps() 反序列化:json.lo ...

  8. Python 查看函数属于哪个模块

    help(函数名)出现的信息里包含了所在模块

  9. Docker最全教程---从理论到实战

    目录 前言 随着生产力的发展尤其是弹性架构的广泛应用(比如微服务),许多一流开发者都将应用托管到了应用容器上,比如Google.微软.亚马逊.腾讯.阿里.京东和新浪. 从未来的发展方向来看,容器引擎将 ...

  10. 二分-G - 4 Values whose Sum is 0

    G - 4 Values whose Sum is 0 The SUM problem can be formulated as follows: given four lists A, B, C, ...