首页 > 其他分享 >[Vue]初始Vue

[Vue]初始Vue

时间:2023-10-15 14:55:06浏览次数:23  
标签:el vue name vm Vue new 初始

Vue2,建议新人直接饮用vue.js文件

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>初识Vue</title>
  <!-- 引入Vue -->
  <script src="./lib/vue-2.5.9.js"></script>
</head>

<body>
  <!-- 准备一个容器 -->
  <div id="root">
    <h1>Hello, {{ name }}</h1>
  </div>
  <script type="text/javascript">
    // 创建vue实例,可以用vm接对象,也可以直接new
    const vm = new Vue({
      el: '#root',                             // element,指容器,值通常为css选择器
      // el: docoment.getElementById('root')   // 也可以,但没必要
      data: {                                  // 数据,供el指定的容器使用
        name: 'Ming',
        age: 18
      }
    })
  </script>
</body>
</html>

 

标签:el,vue,name,vm,Vue,new,初始
From: https://www.cnblogs.com/ximu1009/p/17764278.html

相关文章

  • Error: Vue packages version mismatch: - [email protected] (D:\前端\vue01\node_module
    Error:Vuepackagesversionmismatch:[email protected](D:\\前端\vue01\node_modules\vue\dist\vue.runtime.common.js)[email protected](D:\前端\vue01\node_modules\vue-template-compiler\package.json)根据提示信息,是版本不匹配的问题,可以直接找到vu......
  • vue js获取当天日期
    <template><div><p>Todayis{{today}}</p></div></template><script>exportdefault{data(){return{today:''}},mounted(){this.today=this.getCurrentDate();......
  • 输入vue ui出现Failed to get response from /vue-cli-version-marker
      解决办法:找到 .vuerc文件,位置在C:\Users\当前用户.vuerc将packageManager修改如下:原因是本地hadoop环境变量回合vue项目有冲突,他们都要用到yarn集群 修改后再重新输入vueui,没有报错信息且自动打开Vue项目管理器的页面  ......
  • 一个vuepress配置问题,引发的js递归算法思考
    前言这两天在尝试用语雀+vuepress+github搭建个人博客。小破站地址:王天的web进阶之路语雀作为编辑器,发布文档推送github,再自动打包部署,大概流程如下。问题我使用的elog插件批量导出语雀文档。elog采用的配置是所有文章平铺导出,没有按照语雀知识库目录生成markdown,这导......
  • 手撕Vue-查找指令和模板
    接着上一篇文章,我们已经实现了提取元素到内存的过程,接下来我们要实现的是查找指令和模板。大致的思路是这样的:遍历所有的节点需要判断当前遍历到的节点是一个元素还是一个文本如果是一个元素,我们需要判断有没有v-model属性如果是一个文本,我们需要判断有没有{{}}的内容......
  • vue style 原理
    vuestyle的实现主要通过css的属性选择器什么是属性选择器?答:用于判断标签属性的一种选择器<style>.a[self_attribute]{...}</style><!--生效--><divself_attributeclass="a"></div><!--不生效--><divclass="a"></div&......
  • 23-Vue组件化编程-非单文件组件和单文件组件
    非单文件组件一个文件中包含有n个组件 Vue中使用组件的三大步骤1.定义组件(也就是创建组件)2.注册组件(这里有局部注册和全局注册)3.使用组件(编写组件标签) 注册组件(局部注册)靠newVue的时候传入components选项<!DOCTYPEhtml><htmllang="en"><head><meta......
  • Javascript、axios、vue基础命令快速学习
    1.js:JavaScript基础学习JavaScript基础学习简单案例1.点击img1,则展示img1图片默认,点击img2则展示img2图片2.输入框鼠标聚焦onfocus后,显示小写toLowerCase(),失去焦点onblur后显示大写toUpperCase()3.点击全选按钮,所有复选框为被选中状态,点击反选则取消勾选状态JavaScrip......
  • Vue3 + Quasar系列-代码配置以及报错汇总记录(不断更新中)
    1.Vue3+Quasar系列-代码配置打包去掉hash后缀去掉hashhttps://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa2.Vue3+Quasar改变主题背景quasar的样式和其他的框架修改不太一样,需要我们使用动态的方式来进行变更,一般来说有两种方案进行主题修改方案一:......
  • Vue3| Pinia 持久化插件
    对vuex或Pinia里面的内容做本地持久化1.安装插件:npmipinia-plugin-persistedstate2.将插件添加到pinia实例上①main.js里导入持久化插件:importpiniaPluginPersistedstatefrom'pinia-plugin-persistedstate'② app.use(pinia.use(piniaPluginPersistedstate))......