传统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. vue3中动态添加路由刷新无法正确匹配路由组件

    1.问题 动态添加路由之后,页面重新匹配路由,匹配到了设置的404 notfound页面 该页面是在路径无法匹配到的时候才会跳转的页面 2. 问题查找 在前置路由守卫打印to 发现当前地址匹配到的组件 ...

  2. 一些奇奇怪怪的js知识

    0.关于前端为什么typeof null 得到的结果是 object 对于 null 来说,很多人会认为他是个对象类型,其实这是错误的. 虽然 `typeof null` 会输出 `object`,但 ...

  3. win11设置笔记本合盖不睡眠

    win11设置笔记本合盖不睡眠 直接搜索控制面板,类型选择大图标,找到电源选项 点击进入电源选项,然后点击选择电源按钮的功能 然后就可以看到一个关闭盖子时,设置成不采取任何操作 然后就可以了

  4. 【笔记】go语言--（Slice）切片的概念

    go--(Slice)切片的概念 //切片是什么,定义一个arr,定义一个s为arr中的2到6,这个s就是一个切片 arr := [...]int{0,1,2,3,4,5,6,7} s := arr[ ...

  5. 剑指offer04(Java)二维数组中的查找（中等）

    题目: 在一个 n * m 的二维数组中,每一行都按照从左到右 非递减 的顺序排序,每一列都按照从上到下 非递减 的顺序排序.请完成一个高效的函数,输入这样的一个二维数组和一个整数,判断数组中是否含有 ...

  6. 力扣451(java)-根据字符出现频率排序（中等）

    题目: 给定一个字符串 s ,根据字符出现的 频率 对其进行 降序排序 .一个字符出现的 频率 是它出现在字符串中的次数. 返回 已排序的字符串 .如果有多个答案,返回其中任何一个. 示例 1: 输入 ...

  7. 力扣443(java)-压缩字符串（中等）

    题目: 给你一个字符数组 chars ,请使用下述算法压缩: 从一个空字符串 s 开始.对于 chars 中的每组 连续重复字符 : 如果这一组长度为 1 ,则将字符追加到 s 中.否则,需要向 s ...

  8. 使用Databricks+Mlflow进行机器学习模型的训练和部署【Databricks 数据洞察公开课】

    简介: 介绍如何使用Databricks和MLflow搭建机器学习生命周期管理平台,实现从数据准备.模型训练.参数和性能指标追踪.以及模型部署的全流程. 作者:李锦桂   阿里云开源大数据平台开发工程 ...

  9. 阿里云GanosBase重磅升级，发布首个云孪生时空数据库

    ​简介: GanosBase是李飞飞带领的达摩院数据库与存储实验室联合阿里云共同研发的新一代位置智能引擎:本次重磅升级为V4.0版本,推出首个云孪生时空数据库. ​ 作者 | 谢炯 来源 | 阿里技术 ...

  10. AI让边缘更智能 边缘让AI无处不在

    ​简介: 城市管理和城市服务逐步走向智能化,智慧化.到2019底,全国100%的副省级城市,95%以上的地级市,以及50%以上的县级市均提出建设新型智慧城市,并已经有32个主要城市成立了专门的大数据管 ...