Vue.js教程 2.体验Vue

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <!-- 1. 在页面中导入Vue的包 -->

  <script src="./lib/vue-2.5.9.js"></script>

</head>

<body>

  <!-- 2. 创建一个 容器，将来，使用 Vue 就可以控制这个指定容器中的所有DOM元素  -->

  <div id="app">

    <!-- 这种 {{ }} 语法,叫做 插值表达式, 在插值表达式中,可以写 任何 合法的 JS 表达式  -->

    <p>{{ msg2 ? '这是ok' : '这是 No' }}</p>

    <hr>

    <!-- 注意: {{  }} 语法只能使用在 元素标签内容区域,不能在  属性中使用 -->

    <!-- 这里,我们使用的  v-text 属性语法,叫做  指令  -->

    <!-- 在 Vue 中,所有的指令,都是属性,  Vue的指令,都是以 v- 开头的 -->

    <h3 v-text="msg"></h3>

  </div>

  <!--   <div id="test">

    <p>{{ msg2 }}</p>

  </div> -->

  <script>

    // Vue 这个构造函数哪儿来的？

    // 这里 new Vue() 得到 的 vm 实例,就是  MVVM 中的 核心, VM , 它提供了双向数据绑定的能力

    const vm = new Vue({

      el: '#app', // 指定当前要创建的这个vm实例，要控制页面上哪个区域  element   此处 el 属性指定的 元素，就是我们的 MVVM 中的 V 视图层

      data: { // data 是一个对象，表示 我们要渲染的一些数据     此处的 data 属性就是 MVVM 中的  M 视图数据层

        msg: '这是使用 Vue 渲染的数据哦， 我们并没有操作DOM元素',

        msg2: false

      }

    })

  </script>

</body>

</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-requests包请求响应时间

    p.p1 { margin: 0; font: 14px "Helvetica Neue"; color: rgba(17, 17, 17, 1) } p.p2 { margin: ...

  2. 如何实现Web视频聊天？

    在网页里实现文字聊天是比较容易的,但若要实现视频聊天,就比较麻烦了.这里,我们将实现一个简单的网页版视频聊天Demo,可以支持所有类型的浏览器. 本Demo除了视频聊天功能外,还包含以下功能: 1.上 ...

  3. 鸿蒙内核源码分析(源码注释篇) | 鸿蒙必定成功，也必然成功 | 百篇博客分析OpenHarmony源码 | v13.02

    百篇博客系列篇.本篇为: v13.xx 鸿蒙内核源码分析(源码注释篇) | 鸿蒙必定成功,也必然成功 | 51.c.h .o 几点说明 kernel_liteos_a_note | 中文注解鸿蒙内核 ...

  4. P2350-[HAOI2012]外星人【线性筛】

    正题 题目链接:https://www.luogu.com.cn/problem/P2350 题目大意 给出\(N\)质因数分解之后的结果,求每次\(N=\varphi(N)\),多少次后\(N=1\ ...

  5. 解决导入MAVEN项目报错Dynamic Web Module 3.1 requires Java 1.7 or newer.

    解释:web模块需要使用java1.7及以后的版本,目前的版本不符合.因而只需要修改java版本到1.7及以上即可. 解决方法: 1.保证 在eclipse 构建 web中关于java版本有三处需要修 ...

  6. java SE（未完结）

    数据类型与运算符 数据类型 基础数据类型 数值型 正整型 byte short int long 结尾加(l/L) 浮点型 float 结尾加(f/F) double 字符型 char 只能存储一个字 ...

  7. 简单Tab切换

    延迟Tab切换,使用css中的flex布局,原生js实现.(京东首页菜单也有此延迟功能哦!) 每天进步一丢丢~~ 1.延迟Tab切换 <!DOCTYPE html> <html la ...

  8. 重修 Tarjan

    Tarjan是谁 Tarjan's SCCs(有向图强连通分量)algorithm 给定⼀个有向图 \(G\),若存在 \(rt\in V\),满⾜从 \(rt\) 出发能到达 \(V\) 中的所有的 ...

  9. 题解 Christmas Game

    题目传送门 题目大意 给出 \(t\) 个 \(n\) 个点 \(m\) 条边的无向图,每次可以从任意一棵树选择一条边删掉,然后该树不与根(为 \(1\) )联通的部分被删掉.不能操作的人输.问谁有必 ...

  10. SpringCloud微服务实战——搭建企业级开发框架（二）：环境准备

    这里简单说明一下在Windows系统下开发SpringCloud项目所需要的的基本环境,这里只说明开发过程中基础必须的软件,其他扩展功能(Docker,k8s,MinIO,XXL-JOB,EKL,Ke ...