传统dom操作

使用js或jquery库对html页面结构中的指定的区域输出数据

使用vue实现

在html页面中使用好vue需要完成如下步骤即可

  • 引入vue.js文件
  • 定义给vue.js管理的dom元素(给div定义一个ID)
  • 创建一个 Vue 的实例，并声明要渲染的数据源
  • 在给定的dom元素容器内，绑定数据源中变量名称{{变量名}}

² Vue参数对象属性

el：元素挂载的位置，值可以是CSS选择器或DOM元素

data：模型数据，值是一个对象

² 插值表达式

将数据填充到HTML标签中

支持基本的JavaScript计算操作，例如算术运算、字符串拼接等

下载vue.js

可以在国内cdn镜像站点中下载vue.js文件 https://www.bootcdn.cn/

可以在官网站点中下载vue.js文件 https://cn.vuejs.org/v2/guide/

在html中引入vue.js文件

在html中定义vue管理的视图容器

实例化vue对象并声明数据源，渲染视图显示

vue基础使用的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  9. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  10. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

  1. kong管理界面konga的安装

    kong网关自身的管理界面属于付费的应用,而第三方界面又非常少,konga算是相对比较好的一款了,虽然也有一些问题,但整体的功能还比较全,github仓库为:https://github.com/pa ...

  2. JavaWeb技术JSP连接数据库操作

    "感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 0X01 ...

  3. 【笔记】Oracle union all&for update锁

    [笔记]Oracle union all&for update union all 在Oracle中有三种类型的集合操作 UNION:求并,重复记录只显示一次 UNION ALL:求并集,显示 ...

  4. 牛客网-SQL专项训练24

    ①下列选项关于游标的作用叙述正确的是(D) 解析: 游标是一种从包括多条数据记录的结果集中每次提取一条记录以便处理的机制,可以看做是查询结果的记录指针.游标与视图类似,也是基于基表的临时表对象,也能够 ...

  5. 科普达人丨一图看懂阿里云ECS

    简介: 建议收藏  原文链接:https://click.aliyun.com/m/1000363154/ 本文为阿里云原创内容,未经允许不得转载.

  6. 日处理数据量超10亿：友信金服基于Flink构建实时用户画像系统的实践

    导读:当今生活节奏日益加快,企业面对不断增加的海量信息,其信息筛选和处理效率低下的困扰与日俱增.由于用户营销不够细化,企业 App 中许多不合时宜或不合偏好的消息推送很大程度上影响了用户体验,甚至引发 ...

  7. 使用 @NoRepositoryBean 简化数据库访问

    在 Spring Data JPA 应用程序中管理跨多个存储库接口的数据库访问逻辑可能会变得乏味且容易出错.开发人员经常发现自己为常见查询和方法重复代码,从而导致维护挑战和代码冗余.幸运的是,Spri ...

  8. SpringBoot的@Resource和@Autowired+@Qualifier使用

    1.区别 参考: https://blog.csdn.net/xhbzl/article/details/126765893 https://blog.csdn.net/qq_40263124/art ...

  9. 如何禁用IntelliJ IDEA的LightEdit模式

    更新pycharm之后发现有了个新功能,默认打开文件的时候会单独打开一个窗口,以文本编辑的模式打开,而不是用项目模式.这种打开方式被称为LightEdit Mode.效果如下, 可以注意到窗口很简洁, ...

  10. 【2023知乎爬虫】我用Python爬虫爬了2386条知乎评论！

    目录 一.爬取目标 二.展示爬取结果 三.爬虫代码讲解 3.1 分析知乎页面 3.2 爬虫代码 四.同步视频 五.完整源码 您好,我是 @马哥python说,一枚10年程序猿. 一.爬取目标 前些天我 ...