一、安装

对于新手来说,强烈建议大家使用<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的使用的更多相关文章

  1. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

  2. 后端视角下的前端框架之Vue.js初探

    背景 作为常年搞后端的自己来说,除了多年前学习的一点关于HTML的皮毛,对现在的前端技术栈可谓是一窍不通.但是因为最近在做的内部业务全链路监控系统,负责前端的同事做到一半去搞别的项目了,为了把项目落地 ...

  3. 前端框架之Vue.js

    前言: 前端主流框架有Vue.react.angular,目前比较火因为Vue比较容易学习,运营起来比较快速: Vue是什么呢? 是一个基于MVVM架构的,前端框架: 如果你之前已经习惯了用jQuer ...

  4. 前端框架之vue初步学习

    Vue.js介绍: Vue.js是一个构建数据驱动的web界面的渐进式框架.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既有项目整合 ...

  5. 前端框架之VUE

    vue学习[第1篇]:vue之指令 vue学习[第2篇]:es6简单介绍 vue学习[第3篇]:vue之node.js的简单介绍 vue学习[第4篇]:vue 之webpack打包工具的使用 vue学 ...

  6. web前端框架之Vue hello world

    [博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...

  7. Python-S9——Day100-Web前端框架之Vue

    01 课程简介: 02 let和const: 03 箭头函数: 04 对象的单体模式: 05 nodejs介绍和npm操作: 06 webpack.babel介绍和vue的第一个案例: 07 昨日内容 ...

  8. 前端框架之Vue(10)-全家桶简单使用实例

    vue-router官方文档 vuex官方文档 安装 npm install vue-router --save 使用实例 vue-router初使用(webpack-simple模板) 1.切换到指 ...

  9. Python-S9-Day99——Web前端框架之Vue.js

    01课程安排 02let和const: 03 箭头函数 04 对象的单体模式 05 Node.js介绍和npm操作 06 Webpack,babel介绍和Vue的第一个案例 01课程安排 1.1 ht ...

  10. 前端框架之Vue(6)-列表渲染

    用v-for把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据数组并且 i ...

随机推荐

  1. SQL Server--疑难杂症之坑爹的Windows故障转移群集(转)

    估计是春节前最后一次写博客,也估计是本年值班最后一次踩雷,感叹下成也SQL SERVER,败也SQL SERVER. --======================================= ...

  2. Python--共享变量

    - 共享变量: 当多个线程同时访问一个变量的时候,会产生共享变量的问题 - 案例11 - 解决变量:锁.信号灯 - 锁(Lock): - 是一个标志,表示一个线程在占用一些资源 - 使用方法 - 上锁 ...

  3. HTTP协议(TCP/IP)

    HTTP协议(TCP/IP): 服务器套接字(TCP用主机的IP地址加上主机上的端口号作为TCP连接的端点,这种端点就叫做套接字(socket)或插口)   数据包(请求包.报文)http 请求格式: ...

  4. Spark SQL读写方法

    一.DataFrame:有列名的RDD 首先,我们知道SparkSQL的目的是用sql语句去操作RDD,和Hive类似.SparkSQL的核心结构是DataFrame,如果我们知道RDD里面的字段,也 ...

  5. [js]纯css强制不换行

    要加在li上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. 异常Exception分类

    1:编译时被检测异常:只要有是Exception和其子类都是,除了特殊子类RuntimeException体系.       这种问题已但出现,希望在编译时进行检测,让这种问题有对应处理方式      ...

  7. MySQL数据库之part2

    一.索引原理与慢查询优化 一.介绍 1.为何需要有索引 一般的应用系统,读写比例是10:1左右,而且插入操作和一般的更新操作很少出现性能问题.在生产环境中,我们遇到最多的.也是最容易出问题的还是一些负 ...

  8. 【设计模式】用追MM来解释23种设计模式,转

    创建型模式 1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳和肯德基 ...

  9. fill和memset的区别

    https://blog.csdn.net/xs18952904/article/details/75195412 memset只能初始化成为0或者-1,其他都要用fill来完成. #include& ...

  10. windows server配置ftp服务器以及外网访问

    在Server2012打开 服务器管理器,选择 添加角色与功能,添加Web服务下的FTP服务器 安装后. 我们现在C盘创建一个名字为FTP的文件夹,里面创建一个ftp的文件,做测试用,如图 打开服务器 ...