前端框架VUE----vue的使用
一、安装
对于新手来说,强烈建议大家使用<script>引入

二、 引入vue.js文件

我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数。
三、使用Vue实例化对象
1.创建vue实例对象
<div id="app">
{{ msg }}
</div>

var app = new Vue({
el:'#app',
data:{
msg : '路飞学城'
}
})

输出结果:

ok,我们已经简单的创建了第一个vue应用。渲染的数据的方式我们也叫声明式的渲染。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.msg 的值,你将看到上例相应地更新。
在上面案例中,我们学到了,{{ }}插值的语法。
{{}}插值,不仅可以插变量,只要你能想到的插入都可以,if-else不可以啊!!!
<p>{{1==1?'真的':'假的'}}</p>
data中存储的就是我们的数据属性。Vue实例还暴露了一些有用的属性和方法,它们都有前缀 $,以便与用户定义的属性区分开来

前端框架VUE----vue的使用的更多相关文章
- 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】
↓— Vue.js框架魅力 —↓ 前言 Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...
- 后端视角下的前端框架之Vue.js初探
背景 作为常年搞后端的自己来说,除了多年前学习的一点关于HTML的皮毛,对现在的前端技术栈可谓是一窍不通.但是因为最近在做的内部业务全链路监控系统,负责前端的同事做到一半去搞别的项目了,为了把项目落地 ...
- 前端框架之Vue.js
前言: 前端主流框架有Vue.react.angular,目前比较火因为Vue比较容易学习,运营起来比较快速: Vue是什么呢? 是一个基于MVVM架构的,前端框架: 如果你之前已经习惯了用jQuer ...
- 前端框架之vue初步学习
Vue.js介绍: Vue.js是一个构建数据驱动的web界面的渐进式框架.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合 ...
- 前端框架之VUE
vue学习[第1篇]:vue之指令 vue学习[第2篇]:es6简单介绍 vue学习[第3篇]:vue之node.js的简单介绍 vue学习[第4篇]:vue 之webpack打包工具的使用 vue学 ...
- web前端框架之Vue hello world
[博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...
- Python-S9——Day100-Web前端框架之Vue
01 课程简介: 02 let和const: 03 箭头函数: 04 对象的单体模式: 05 nodejs介绍和npm操作: 06 webpack.babel介绍和vue的第一个案例: 07 昨日内容 ...
- 前端框架之Vue(10)-全家桶简单使用实例
vue-router官方文档 vuex官方文档 安装 npm install vue-router --save 使用实例 vue-router初使用(webpack-simple模板) 1.切换到指 ...
- Python-S9-Day99——Web前端框架之Vue.js
01课程安排 02let和const: 03 箭头函数 04 对象的单体模式 05 Node.js介绍和npm操作 06 Webpack,babel介绍和Vue的第一个案例 01课程安排 1.1 ht ...
- 前端框架之Vue(6)-列表渲染
用v-for把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据数组并且 i ...
随机推荐
- Cglib动态代理实现原理
Cglib动态代理实现方式 我们先通过一个demo看一下Cglib是如何实现动态代理的. 首先定义个服务类,有两个方法并且其中一个方法用final来修饰. public class PersonSer ...
- 前端文档汇总(含代码规范、开发流程、知识分享,持续更新) front-end-Doc
https://juejin.im/post/5b1205b1f265da6e1a602a62 https://juejin.im/post/5b1205b1f265da6e1a602a62 http ...
- C 字符及ASCII值
.已知字母A的ASCII码为十进制的65,下面程序的输出是___A___. main() { char ch1,ch2; ch1='; ch2='; printf("%d,%c\n" ...
- [js]js的表单验证onsubmit方法
http://uule.iteye.com/blog/2183622 表单验证类 <form class="form" method="post" id= ...
- 7个Java项目,或许你的大学老师就会布置
前言: 有天吃饭和朋友聊天,说到大学老师布置的开发项目,结果我们一干人说出来的都基本一样,入门级别的计算器啦,稍微大一点的记事本啦,然后到后面的图书管理系统啊,购物网站啊-- 发现这些项目都是大学老师 ...
- UX求职:FB和微软这些大佬公司看重的UX设计师技能,你还差几条?
最近是金三银四的求职季,当然,不管你是想求职跳槽,还是想不断充电学习升职加薪,总是要从优秀的一群人中学习. 本文依据 Facebook.微软.Booking 等互联网大佬公司的UX设计师访谈记录,整理 ...
- the import XXXX cannot be resolved 解决方法
明明XXX类完全没问题 突然就报错了 解决方法: 原因一:一个项目引用了兄弟项目的类,报错The import XXX cannot be resolved 解决办法:需要在引用的兄弟项目右键选择Ma ...
- Linux基础(一)流程控制
Shell 流程控制 if 语句语法格式1: 写成一行(适用于终端命令提示符):if [ $(ps -ef | grep -c "ssh") -gt 1 ]; then echo ...
- SQL语句提取某列中的HTML文本内容。或者说怎么用SQL语句去除所有HTML标签
CREATE FUNCTION [dbo].[f_trimstr] ( @str NVARCHAR(MAX) ) RETURNS NVARCHAR(MAX) AS BEGIN ...
- Oracle使用rman备份数据库时出现cannot reclaim的错误
1. 按照<2 day DBA>中的guide,设置fast recovery area. SQL> ALTER SYSTEM SET DB_RECOVERY_FILE_DEST_S ...