Vue配置el有2种写法

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量613 收藏 1
点赞数
分类专栏： Vue.js 文章标签： vue.js ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46724415/article/details/121364367
版权

写法一、new Vue时候配置el属性

 new Vue({
    el: '#root',
    data: {
      name: 'xiaoxiao'
    }
  })

先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值

你可以控制台打印v

const v = new Vue({
  data: {
     name: 'xiaoxiao'
   }
 })
 v.$mount('#root')

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el有2种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。

    const v = new Vue({
      data: {
        name: 'xiaoxiao'
      }
    })
    console.log(v)
    v.$mount('#root')
	</script>
</html>

在这里插入图片描述

仰望天空的小小蜗牛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue模板语法02
qq_66924116的博客
09-04 785
介绍；组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码;组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树全局（component）和局部组件全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。局部组件: new Vue({el:'#d1',components:{...}})
Vue2 模板template的四种写法总结
01-21
如下所示： <div id=app> <h1>我是直接写在构造器里的模板1</h1> </div> <template id=demo3> <h1 xss=removed>我是选项模板3</h1> </template> [removed] <h1 xss=removed>我是script标签模板4</h1> [removed] [removed] var vm=new Vue({ el:#app, data:{ message:1 }, //第2种模板 写在构造器
简单说说vue中的el属性
树上骑个猴的博客
09-14 1万+
每个vue2.x项目中我们都会看到入口文件(即main.js)中，在生成根实例时会配置el属性，而我们自己创建的组件中则不能配置该属性，下面引用了官方文档中对el属性的说明： el 类型：string | Element 限制：只在用 new 创建实例时生效。 详细： 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 在实例挂载之后，元素可以用 vm.el访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，
vue与elementUI电商后台管理系统笔记03
00年女程序员分享自己的学习笔记
07-07 460
表单数据绑定表单数据验证实现表单重置登录前的预验证根据预验证是否发起请求axios全局配置使用axios.post Async和Await简化Promise 配置弹窗提醒token保存到sessionStorage中 跳转到后台主页 路由导航守卫控制访问权限 退出功能实现原理...
vue里的export default
热门推荐
张木期的博客
08-19 5万+
相信大家看Vue项目肯定会看到各种导入导出,下面来介绍一下. Vue 的模块机制 Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块，例如： 　　此外，你还可以在 bulid/webpack.base.conf.js 文件中修改相关配置： 　　意思是，你的模块可以省略 “.js”，".vue"，“.json” 后缀，weebpack 会在之后自动添加上；可以用 “@” 符号代替 “src” 字符串等。 　　 　export 用来导出模块，Vue 的单文件组件通常需要导出
Vue（数据绑定、el和data多种写法、理解MVVM、数据代理）
weixin_57920269的博客
04-23 999
get() {},},});
VUE基础
qq_42739776的博客
12-03 364
vue.js引入： 1.文本 <div id="box"> <h1>{{msg+"改变后"+msg.split('').reverse().join('')}}</h1> </div> <script> var vm = new Vue({ el:'#box', data:{ msg:'hello'
vue快基础知识快速入门
weixin_48514459的博客
03-07 202
Vue.js快速入门 掌握HTML,CSS,JavaScript，ajax 开发工具：vscode 1、Vue基础 1.1Vue简介： JavaScript框架 简化DOM操作 响应式数据驱动（数据与页面同步更新） https://cn.vuejs.org/ 1.2第一个Vue程序 开发步骤： 导入开发版本的Vue.js 创建Vue实例对象，设置el属性和data属性 使用简洁的模板把数据渲染到页面上 <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src
Vue 基础
Zhangzhang15的博客
08-16 959
Vue 基础
vue中el-input绑定键盘按键(按键修饰符)
11-20
vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码： <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue组件的写法汇总
11-27
常见的vue组件写法有四种，各有特色，适用于不同的场景。 1、全局组件 结构： // 组件的注册 Vue.component( 'componentName', { template: // 组件的html结构, data(){ return{ // 组件中的属性 } }, ...
data与el的2中写法：.md
07-20
data与el的2中写法：.md
vue入门
脚踏实地
10-14 273
一、vue的特点 1、模板渲染 2、模块化 3、扩展功能 路由、ajax、数据流 二、内容 vue实例 模板渲染 条件渲染 组件交互 标签属性 事件绑定 计算属性 属性监听 表单 动画 vue-cli项目搭建 vue-router vuex vue组件 vue指令 内置组件 实例方法 实例选项 实例属性 三、入门 1、 项目搭建 > 创建...
【Vue】el 和 data 的含义与两种写法
y_coder的博客
03-15 249
先创建 Vue 实例，随后再通过 $mount 方法来指定 el 的值。其中，mount 有挂载的意思，通俗来讲他的作用就是把 Vue 对象中的内容放到绑定的容器里面。
初识vue
柔光
05-14 260
官网：https://cn.vuejs.org/ 属性 ---- 变量 ---- 模型 方法 ---- 函数 1.介绍 1.渐进式 JavaScript 框架：主张最少。 2.优点：易用 灵活 高效 指令系统 SPA(单页面应用) MVVM 多页面应用：1个url 对应一个html页面，多个url对应多个html 单页面应用：多个url对应1个html页面 3.兼容：Vue不支持IE8 及...
Vue学习笔记之01-Vue的特点
AshesO的博客
11-06 198
Vue基础 0.准备工作 + 下载vue 可以通过cdn引入vue 也可以下载vue.js本地引入 + vue的基本使用 - 在引入vue后 new Vue({}) 一个vue对象 - 这样操作是为了防止XSS,csrf的攻击 - 例如 new Vue({ el : '#box', //此处写需要进行vue渲染的元素 data : { // 此处写变量 myname : 'xiaoLam'
vue 基础知识
datouniao1的博客
08-24 454
v-on引入vue插件 在网上可以下载vue.js 然后再html 文件中导入： <script type="text/javascript" src='vue.js'></script> Vue 数据显示 <body> <div id="app"> {{a}} </div> </body> <script type="text/javascript"> var data={a...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 530
步骤很详细，直接上教程……
vue2的写法
05-31
Vue2的写法通常包括以下几个步骤： 1. 引入Vue.js库 ```html <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> ``` 2. 创建Vue实例 ```javascript var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ``` 3. 在HTML中使用Vue实例中的数据 ```html <div id="app"> {{ message }} </div> ``` 这个例子中，Vue实例的数据`message`绑定在HTML模板中的`{{ message }}`里面，当Vue实例的数据改变时，页面上的内容也会随之更新。 以上是Vue2的基本写法，当然还有很多其他的特性和语法，可以根据需求进行学习和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值