一、安装

对于新手来说,强烈建议大家使用<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. Linux学习之路(一)

    导语: 早前为了方便日常开发,建立跟生产环境类型的环境的时候考虑使用docker作为模拟生产环境,结果没想到给自己的学习挖了一个大坑.其他关于docker容器技术的坑先不在这里赘述,有时间的话在其他文 ...

  2. Python爬虫-05:Ajax加载的动态页面内容

    1. 获取AJAX加载动态页面的内容 1.1. Introduction 如果所爬取的网址是通过Ajax方式加载的,就直接抓包,拿他后面传输数据的文件 有些网页内容使用AJAX加载,只要记得,AJAX ...

  3. Unittest框架小结

    在日常的自动化测试过程中,Python里有一个自带的单元测试框架是unittest模块,简单易用,这里简单介绍下其主要的用法. Unittest测试框架主要包含四个部分 TestCase 也就是测试用 ...

  4. 《Java大学教程》—第12章 案例研究--第2部分

    本章就是上一章的延续,主要是用GUI实现了控制界面. 编程练习:代码附件Hostel.java1.    正确运行2.    Runhostel.java3.    searchButton

  5. [NOI2017]蔬菜

    [NOI2017]蔬菜 题目描述 大意就是有\(n\)种物品,第\(i\)个物品有\(c_i\)个,单价是\(a_i\).然后每天你可以卖出最多\(m\)个物品.每天结束后第\(i\)种物品会减少\( ...

  6. ssh 免密码登录配置,及其原理

    1.废话不多说,先上图   2. 典型的RSA非对称加密 RSA加密算法是一种典型的非对称加密算法,它基于大数的因式分解数学难题,它也是应用最广泛的非对称加密算法,于1978年由美国麻省理工学院(MI ...

  7. 阿里云轻量应用服务器debian8.9用apache多端口搭建多站点

    前几天想要再搭个网站玩玩,就用阿里的服务器,apache本地搭建站点和服务器相差不多,然而却踩了大坑,差点耗死在这儿. 先进入apache这个目录,有如下文件夹: 打开ports.conf,  添加 ...

  8. Android so注入(inject)和Hook技术学习(二)——Got表hook之导入表hook

    全局符号表(GOT表)hook实际是通过解析SO文件,将待hook函数在got表的地址替换为自己函数的入口地址,这样目标进程每次调用待hook函数时,实际上是执行了我们自己的函数. GOT表其实包含了 ...

  9. Java线程池实现原理与技术(ThreadPoolExecutor、Executors)

    本文将通过实现一个简易的线程池理解线程池的原理,以及介绍JDK中自带的线程池ThreadPoolExecutor和Executor框架. 1.无限制线程的缺陷 多线程的软件设计方法确实可以最大限度地发 ...

  10. 今天我得鼓吹一波 Kotlin

    Kotlin 被作为 Google 官方语言也有一年多了,但除了刚宣布那个月极度火爆以外,后面生活又回归了平静.不少小伙伴紧跟 Google 爸爸的步伐,也对 Kotlin 有了或多或少的了解,Git ...