Vue.js教程 2.体验Vue

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <!-- 1. 在页面中导入Vue的包 -->
  10.   <script src="./lib/vue-2.5.9.js"></script>
  11. </head>
  13. <body>
  14.   <!-- 2. 创建一个 容器，将来，使用 Vue 就可以控制这个指定容器中的所有DOM元素  -->
  15.   <div id="app">
  16.     <!-- 这种 {{ }} 语法,叫做 插值表达式, 在插值表达式中,可以写 任何 合法的 JS 表达式  -->
  17.     <p>{{ msg2 ? '这是ok' : '这是 No' }}</p>
  18.     <hr>
  19.     <!-- 注意: {{  }} 语法只能使用在 元素标签内容区域,不能在  属性中使用 -->
  20.     <!-- 这里,我们使用的  v-text 属性语法,叫做  指令  -->
  21.     <!-- 在 Vue 中,所有的指令,都是属性,  Vue的指令,都是以 v- 开头的 -->
  22.     <h3 v-text="msg"></h3>
  23.   </div>
  25.   <!--   <div id="test">
  26.     <p>{{ msg2 }}</p>
  27.   </div> -->
  29.   <script>
  31.     // Vue 这个构造函数哪儿来的？
  32.     // 这里 new Vue() 得到 的 vm 实例,就是  MVVM 中的 核心, VM , 它提供了双向数据绑定的能力
  33.     const vm = new Vue({
  34.       el: '#app', // 指定当前要创建的这个vm实例，要控制页面上哪个区域  element   此处 el 属性指定的 元素，就是我们的 MVVM 中的 V 视图层
  35.       data: { // data 是一个对象，表示 我们要渲染的一些数据     此处的 data 属性就是 MVVM 中的  M 视图数据层
  36.         msg: '这是使用 Vue 渲染的数据哦， 我们并没有操作DOM元素',
  37.         msg2: false
  38.       }
  39.     })
  41.   </script>
  42. </body>
  44. </html>

Vue.js教程 2.体验Vue的更多相关文章

  1. Vue.Js的用户体验优化

    一次基于Vue.Js的用户体验优化   一.写在前面 半年以前,第一次在项目上实践VueJs,由于在那之前,没有Angular,avalon等框架的实践经验,所以在Vue的使用上,没有给自己总结出更多 ...

  2. Vue.js教程—1.介绍和安装

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定 ...

  3. Vue.js教程 1.前端框架学习介绍

    Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...

  4. Vue.js系列(一)：Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  5. Vue.js是什么，vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  6. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  7. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  8. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

  9. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

随机推荐

  1. python线程threading

    线程示例: import threading import time # 唱歌任务 def sing(): # 扩展: 获取当前线程 # print("sing当前执行的线程为:" ...

  2. 鸿蒙内核源码分析(中断管理篇) | 江湖从此不再怕中断 | 百篇博客分析OpenHarmony源码 | v44.02

    百篇博客系列篇.本篇为: v44.xx 鸿蒙内核源码分析(中断管理篇) | 江湖从此不再怕中断 | 51.c.h .o 硬件架构相关篇为: v22.xx 鸿蒙内核源码分析(汇编基础篇) | CPU在哪 ...

  3. bzoj4025-二分图【线段树分治,并查集】

    正题 题目链接:https://darkbzoj.tk/problem/4025 题目大意 \(n\)个点\(m\)条边,每条边会在一个\(T\)以内的时间段内出现,对于任意一个\(T\)以内的时刻求 ...

  4. Kubernetes-Service介绍(一)-基本概念

    前言 本篇是Kubernetes第八篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战.Pod篇暂时应该还缺少两篇,等Service和存储相关内容介绍以后,补充剩下的两篇,有状态的Pod会涉及 ...

  5. NOIP 模拟 七十一

    最后一场多校模拟赛,好像是信心赛??不过考的不行..最近难题比较多,对题目的难度把握不够好,经常出现简单题跳过的现象. 100+100+20+40 T1 签到题(qiandao) 如果一个点的度数不是 ...

  6. Ubuntu18.04安装MySQL教程

    Ubuntu18.04下安装MySQL 提示:以下操作均在root权限下进行. # 查看有没有安装MySQL: dpkg -l | grep mysql # 安装MySQL: apt install ...

  7. js高阶

    1. 面向对象编程介绍 1.1 两大编程思想 --- 面向过程 --- 面向对象 1.2 面向过程编程 POP 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候在一 ...

  8. 洛谷3233 HNOI2014（虚树+dp）

    膜拜一发\(mts\_246,forever\_shi\) 这两位爷是真的无敌! 首先来看这个题,一看题目的数据范围和"关键点"字眼,我们就能得知这是一道虚树题 那就先一如既往的建 ...

  9. JSR303数据校验

    Springboot中可以用@validated来校验数据,如果数据异常则会统一抛出异常,方便异常中心统一处理. 导入依赖: <dependency> <groupId>org ...

  10. Redis 面试常见问题———缓存雪崩、缓存击穿以及缓存穿透

    在开发中会面临缓存异常可能会出现三个问题,分别是缓存雪崩.缓存击穿和缓存穿透.这三个问题会导致大量请求从缓存转移到数据库,如果请求的并发量很大的话,就会导致数据库崩溃.所以在面试官也会经常问这些问题. ...