传统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. Thinkphp5.x全漏洞复现分析

    基础知识 命名空间和子命名空间 我们可以把namespace理解为一个单独的空间,事实上它也就是一个空间而已,子命名空间那就是空间里再划分几个小空间,举个例子: <?php namespace ...

  2. 当 Knative 遇见 WebAssembly

    简介: Knative 可以支持各种容器化的运行时环境,我们今天来探索一下利用 WebAssembly 技术作为一个新的 Serverless 运行时. 作者:易立 Knative 是在 Kubern ...

  3. 小米电商 Apache Dubbo-go 微服务实践

    ​简介:2021 年是小米中国区电商部门变动调整较大的一年,小米中国区早期电商.服务体系建立在 Go 语言构建的微服务体系之上,由内部自研的 Go 语言微服务框架 koala 支撑起数以千计的微服务应 ...

  4. 阿里云实时数仓Hologres年度发布，解读数仓新趋势

    ​简介:阿里云实时数仓Hologres年度发布,解读数仓新趋势. 1月7日,阿里云实时数仓Hologres发布最新版本,在成本.可用性.在线高可用等多方面进行了能力升级,行存吞吐提升100%,列存吞吐 ...

  5. 大模型 RAG 是什么

    大模型 RAG(Retrieval-Augmented Generation)是一种结合了检索(Retrieval)与生成(Generation)能力的先进人工智能技术,主要用于增强大型语言模型(LL ...

  6. k8s问题解决

    问题1: 问题描述:k8s中Terminating状态pod不能删除 [root@master ~]# kubectl get pods -n ms NAME READY STATUS RESTART ...

  7. github只下载某个文件或文件夹（使用GitZip插件）

    安装GitZip插件 (此安装过程需要梯子(不懂"梯子",百度一下就明白)) 1. 打开插件管理页面 方法一:打开Chrome浏览器(Edge浏览器同理),在Chrom地址栏输入c ...

  8. 【GUI软件】小红书搜索结果批量采集，支持多个关键词同时抓取！

    目录 一.背景介绍 1.1 爬取目标 1.2 演示视频 1.3 软件说明 二.代码讲解 2.1 爬虫采集模块 2.2 软件界面模块 2.3 日志模块 三.获取源码及软件 一.背景介绍 1.1 爬取目标 ...

  9. OpenCompass-书生浦语大模型实战营第二期第7节作业

    书生浦语大模型实战营第二期第7节作业 这一节的作业和第6节作业一样没有特别多好说的,以运行结果为主. 基础作业 使用 OpenCompass 评测 internlm2-chat-1_8b 模型在 C- ...

  10. IceRPC之服务器地址与TLS的安全性->快乐的RPC

    作者引言 很高兴啊,我们来到了IceRPC之服务器地址与TLS的安全性->快乐的RPC, 基础引导,让自已不在迷茫,快乐的畅游世界. 服务器地址 ServerAddress 了解服务器地址的概念 ...