Vue.js教程 2.体验Vue
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的更多相关文章
- Vue.Js的用户体验优化
一次基于Vue.Js的用户体验优化 一.写在前面 半年以前,第一次在项目上实践VueJs,由于在那之前,没有Angular,avalon等框架的实践经验,所以在Vue的使用上,没有给自己总结出更多 ...
- Vue.js教程—1.介绍和安装
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定 ...
- Vue.js教程 1.前端框架学习介绍
Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...
- Vue.js系列(一)：Vue项目创建详解
引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...
- Vue.js是什么，vue介绍
Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
- 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结
大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...
- 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结
大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...
随机推荐
- Data Interoperability Tools
这里的工具貌似没有对应函数~~~
- 每日总结：charcter方法（2021.10.5）
\t 在文中该处插入一个tab键 \b在文中该处插入一个后退键 \n 换行 \r 在文中该处回车 \f 在文中该处插入换页符 方法: isLetter()是否是一个字母 isDigit()是否是一个 ...
- luogu1438无聊的数列（区间加等差数列，求一个数的和）
QAQ一道线段树好题 题目大意: 给定一个有n个数的数列,共m种操作,有两种操作 \(1\ l\ r\ k\ d\)表示将\(a[l]\)~\(a[r]\)的数加一个以k为首相,d为公差 \(2\ x ...
- EPUB文件格式简单解析
最近热衷于看轻小说,奈何某些网站样式排版属实糟糕,移动端体验极度不友好,实在无法忍受,于是希望能将网站内容爬取下来制作成EPUB格式的电子书. 抛开爬取网站内容不谈,通过解析EPUB文件后,大致掌握了 ...
- MySQL ENGINES 引擎
引擎 存储引擎是数据库底层软件组织. 数据库管理系统(DBMS)使用数据引擎进行创建.查询.更新和删除数据. 不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能. MySQL的核心就是存储引擎 ...
- Windows使用Git的vim编辑器编译运行程序
Windows配置gcc 新建一个main.c $ touch main.c #在当前目录下创建main.c $ mkdir folder #在当前目录下创建folder文件夹 $ rm main.c ...
- DL4J实战之五：矩阵操作基本功
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- Bug概述、状态、类型、级别、优先级提交和Bug生命周期管理
缺陷概述: 1)缺陷(Defect):是指存在于软件之中偏差,可被激活,以静态形式存在于软件内部,相当于Bug. 2)故障(Fault):当缺陷被激活后,软件运⾏中出现的状态,可引起意外情况,若不加处 ...
- F1英国大奖赛-银石赛道地图及弯道
背景 今天晚上(2020-08-02)是今年英国大奖赛的正赛.刚好了解了一下赛道地图.记录一下,明年就不用到处找了. 简介 银石赛道(Silverstone Circuit)由一个废弃的空军基地改建, ...
- httpclient 登录成功后返回的cookie值访问下一页面
HttpClient4.x可以自带维持会话功能,只要使用同一个HttpClient且未关闭连接,则可以使用相同会话来访问其他要求登录验证的服务(见TestLogin()方法中的"执行get请 ...