传统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. Advanced .Net Debugging 7：托管堆与垃圾收集

    一.简介 这是我的<Advanced .Net Debugging>这个系列的第七篇文章.这篇文章的内容是原书的第二部分的[调试实战]的第五章,这一章主要讲的是从根本上认识托管堆和垃圾回收 ...

  2. 力扣217(java&python)-存在重复元素（简单）

    题目: 给你一个整数数组 nums .如果任一值在数组中出现 至少两次 ,返回 true :如果数组中每个元素互不相同,返回 false . 示例 1: 输入:nums = [1,2,3,1]输出:t ...

  3. 面试官：在原生input上面使用v-model和组件上面使用有什么区别？

    前言 还是上一篇面试官:来说说vue3是怎么处理内置的v-for.v-model等指令? 文章的那个粉丝,面试官接着问了他另外一个v-model的问题. 面试官:vue3的v-model都用过吧,来讲 ...

  4. 谢老师2024春 - Day1：组合数学

    Day1:组合数学 A - P5520 [yLOI2019] 青原樱 隔板法: 已选择的位置:\(m\) 棵樱花树. 未选择的位置:\(n-m\) 个空位置 板的数量(一棵樱花树就是一个板):\(m\ ...

  5. 龙湖千丁基于 ACK@Edge 的云原生智慧停车系统架构实践

    简介: 结合龙湖千丁自研的新版停车云系统以及 ACK@Edge 提供的标准 Kubernetes 服务以及云边一体化协同解决方案,整体来着,边缘部署时间成本由 1 天缩短到 3 小时,将之前的手动升级 ...

  6. 最佳实践丨云上虚拟IDC（私有池）如何为客户业务的确定性、连续性保驾护航

    ​简介: 企业业务上云后,还面临特定可用区购买云上特定计算产品实例失败的困境?云上私有池pick一下 Why 云上业务为什么需要资源确定性.服务连续性 云计算正朝着像水电煤一样的基础设施演进,支持用户 ...

  7. [FAQ] 修改了Dockerfile 之后，运行 docker-compose up --force-recreate 时还是报之前构建时的错误？

      因为 Docker Compose 的 --force-recreate 选项只会强制重新创建容器,而不会重新构建镜像. 因此,如果你修改了Dockerfile,需要确保重新构建新的镜像. 你可以 ...

  8. XAML 给资源起个好名字 用 StaticResource 起一个别名

    本文来和大家聊一下关于 XAML 资源的定义的事情,和开发技术关系不大,更多的是开发的思路 在稍微大一点的项目里,肯定 XAML 资源是少不了的.对于 XAML 资源,行业里讨论多(非小白讨论)的是关 ...

  9. 5.k8s Service四层负载：服务端口暴露

    题目一:暴露服务service 设置配置环境: [candidate@node-1] $ kubectl config use-context k8s Task 请重新配置现有的 deployment ...

  10. 开源文档预览项目 kkFileView (9.9k star) ，快速入门

    kkFileView 是一款文件文档在线预览解决方案,采用流行的 Spring Boot 框架构建,易于上手和部署. 该项目基本支持主流办公文档的在线预览,包括但不限于 doc.docx.xls.xl ...