11-vue的使用
一、安装
对于新手来说,强烈建议大家使用<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的使用的更多相关文章
- 11.vue 数据交互
vue new Vue({ el,选择器 string/obj 不能选择html/body data, methods, template string/obj //生命周期 -- 虚拟DOM 1.初 ...
- 1-1 Vue的介绍
简单介绍Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易 ...
- 11.VUE学习之提交表单时拿到input里的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 11 Vue学习 headtop
1: HeaderTop.vue : 面包屑:el-breadcrumb 定义面包屑, separator是分隔符. el-breadcrumb-item: 是面包屑中用 分隔符 分开的多 ...
- 11 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...
- 前端学习笔记系列一:11@vue/cli3.x中实现跨域的问题
由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...
- 11 vue 自定义全局方法
//global.js// 定义vue 全局方 // 定义vue 全局方法 建议自定义的全局方法加_ 以示区分 export default { install(Vue, options = ...
- 11. VUE 数组操作
变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() 添加元素 <ul id="example-1"> <li ...
- 11.Vue.js-事件处理器
事件监听可以使用 v-on 指令: <div id="app"> <button v-on:click="counter += 1">增 ...
- vue 组建实现数据的双向绑定
<!DOCTYPE html><html><head> <style>body { font-family: Helvetica Neue, Aria ...
随机推荐
- LeetCode算法题-Pascal's Triangle II(Java实现)
这是悦乐书的第171次更新,第173篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第30题(顺位题号是119).给定非负索引k,其中k≤33,返回Pascal三角形的第k ...
- 在Eclipse中创建maven项目出现的环境警告 j2se-1.5
Build path specifies execution environment J2SE-1.5. There are no JREs installed in the workspace th ...
- 《JAVA程序设计》_第二周学习总结
20175217吴一凡 一.IDEA的安装和使用 参考老师的教程Intellj IDEA 简易教程. 1.IDEA的安装 因为我已经习惯了在Linux上敲代码,所以我决定将IDEA安装在虚拟机上. 首 ...
- WPF之DataGrid应用 翻页
前几天打算尝试下DataGrid的用法,起初以为应该很简单,可后来被各种使用方法和功能实现所折磨.网络上的解决方法太多,但也太杂.没法子,我只好硬着头皮阅览各种文献资料,然后不断的去尝试,总算小有成果 ...
- ClickHouse最简单的安装方法
安装包地址: https://packagecloud.io/Altinity/clickhouse 无需下载安装包,更新yum源即可!! 最后: yum install -y clickhouse- ...
- php面试中的经典问题
原文:https://blog.csdn.net/ghostlv/article/details/51284745 问题一问题描述考虑下面代码: $str1 = 'yabadabadoo';$str2 ...
- Linux:Day4(下) 用户及组管理
Linux用户:Username/UID 管理员:root,0 普通用户: 1-65535 系统用户:1-499 对守护进程获取资源进行权限分配: 登陆用户:500+ 交互式登录: Linux组:Gr ...
- python3 迭代器
''' 迭代:重复的过程,并且每次迭代的结果都是下次迭代的初始值 可迭代的 Iterable 迭代器 Iterator iter(数据) == 数据.__iter__() 将数据转换为迭代器 next ...
- 【mongoDB查询进阶】聚合管道(一) -- 初识
https://segmentfault.com/a/1190000010618355 前言:一般查询可以通过find方法,但如果是比较复杂的查询或者数据统计的话,find可能就无能为力了,这时也许你 ...
- java 变量 final 小结
通过查看hashCode发现,变量声明final后,不能修改,上级修改时候,重新获得对象hashCode变化 public static void main(String[] args) { // T ...