一、安装

对于新手来说,强烈建议大家使用<script>引入

二、 引入vue.js文件

我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数。

三、使用Vue实例化对象

1.创建vue实例对象

<div id="app">
{{ msg }}
</div>

vue代码

var app = new Vue({
el:'#app',
data:{
msg : '你好,世界'
}
})

输出结果:

 

ok,我们已经简单的创建了第一个vue应用。渲染的数据的方式我们也叫声明式的渲染。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.msg 的值,你将看到上例相应地更新。

在上面案例中,我们学到了,{{ }}插值的语法。

{{}}插值,不仅可以插变量,只要你能想到的插入都可以,if-else不可以啊!!!

<p>{{1==1?'真的':'假的'}}</p>

data中存储的就是我们的数据属性。Vue实例还暴露了一些有用的属性和方法,它们都有前缀 $,以便与用户定义的属性区分开来

  

11-vue的使用的更多相关文章

  1. 11.vue 数据交互

    vue new Vue({ el,选择器 string/obj 不能选择html/body data, methods, template string/obj //生命周期 -- 虚拟DOM 1.初 ...

  2. 1-1 Vue的介绍

    简单介绍Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易 ...

  3. 11.VUE学习之提交表单时拿到input里的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. 11 Vue学习 headtop

    1: HeaderTop.vue : 面包屑:el-breadcrumb 定义面包屑, separator是分隔符.       el-breadcrumb-item: 是面包屑中用 分隔符 分开的多 ...

  5. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

  6. 前端学习笔记系列一:11@vue/cli3.x中实现跨域的问题

    由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...

  7. 11 vue 自定义全局方法

    //global.js// 定义vue 全局方   // 定义vue 全局方法 建议自定义的全局方法加_ 以示区分 export default {   install(Vue, options =  ...

  8. 11. VUE 数组操作

    变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() 添加元素 <ul id="example-1"> <li ...

  9. 11.Vue.js-事件处理器

    事件监听可以使用 v-on 指令: <div id="app"> <button v-on:click="counter += 1">增 ...

  10. vue 组建实现数据的双向绑定

    <!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Aria ...

随机推荐

  1. PATH_SEPARATOR

    PATH_SEPARATOR是一个常量,在Linux系统中是一个" : "号,Windows上是一个";"号.所以编写程序时最好用常量 PATH_SEPARAT ...

  2. 网站出现403 Forbidden

    1, 你在一定时间内过多地访问此网站(一般是用采集程序),被防火墙拒绝访问了 2, 网站域名解析到了空间,但空间未绑定此域名 3, 你的网页脚本文件在当前目录下没有执行权限 4, 服务器繁忙,同一IP ...

  3. JavaScript -- 时光流逝(五):js中的 Date 对象的方法

    JavaScript -- 知识点回顾篇(五):js中的 Date 对象的方法 Date 对象: 用于处理日期和时间. 1. Date对象的方法 <script type="text/ ...

  4. 注入攻击(SQL注入防御)

    正确的防御SQL注入 sql注入的防御不是简单只做一些用户输入的escape处理,这样是不够的,只是提高了攻击者的门槛而已,还是不够安全. 例如 mysql_real_escape_string()函 ...

  5. linux远程目录共享

    一.环境介绍 1.服务器说明: 有两台服务器,(1)101报表服务器,上面是tomcat跑的原生FineReport报表系统,(2)103业务服务器,上面是具体的业务系统. 2.需求说明: 报表文件由 ...

  6. 【C编程基础】C程序常用函数

    基础知识 1.const const 修饰的数据类型是指常类型,常类型的变量或对象的值是不能被更新的. ; 或 ; //在定义该const变量时,通常需要对它进行初始化,因为以后就没有机会再改变它了 ...

  7. Python入门学习:1.变量和简单的数据类型

    python入门学习:1.变量和简单的数据类型 关键点:变量.字符串.数字 1.1 变量的命名和使用1.2 字符串1.3 数字1.4 注释 1.1 变量的命名和使用   变量,顾名思义是一个可变的量, ...

  8. 自动化测试中依据元素实时截图,比较元素图片是否一致(selenium和appium通用)

    1.根据元素的上下左右的坐标进行截图 2.先安装pillow 3.下面是截图 4.下面是比较两张图片的值 5.截取两张图片,然后对两张图片比对,这种场景,可以在测试视频播放.图片显示页面做验证.

  9. Linux系统学习之Linux账号管理

    一.基本介绍 Linux用户分为三类,即普通用户.根用户.系统用户. 普通用户指的是所有使用Linux系统的真实用户. 根用户就是root用户,权限最大,它的ID为0,也被称为超级用户,root用户拥 ...

  10. IDE安装Lombok插件提高开发效率

    Lombok官方api:https://projectlombok.org/features/index.html 使用lombok之后,省去了许多没必要的get,set,toString,equal ...