可以在html下运行的vue的helloworld

最新推荐文章于 2023-04-14 21:52:40 发布
最新推荐文章于 2023-04-14 21:52:40 发布
阅读量775 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyulin54321/article/details/80470734
版权 
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/Sortable/1.6.0/Sortable.js"></script>
</head>
<body>
<div id="app">
   <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>

    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>

    <el-table-column
            prop="img"
      label="图片">
      <template scope="scope">
        <img :src="scope.row.img" width="120" height="80" />
      </template>

    </el-table-column>
  </el-table>
</div>

<script>
 var testVue = new Vue({
    el:'#app',
    data(){
        return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
            img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
             img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
             img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
             img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
        }]
      }
    }
});
</script>
</body>
</html></span>
zhangyulin54321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue起步 - helloWorld
肉团子的博客
07-23 330
背景 开发工具：Visual Studio Code 1.36.1 Vue版本：2.x HelloWorld 是不是没有代码提示呀～是不是不知道怎么在浏览器上运行写的html代码呀～当你遇到各种问题以为是IDE不好使的时候，那你应该上网搜一下是不是有插件可以辅助，【vscode常用插件推荐 ：https://www.cnblogs.com/karthuslorin/p/8577224.ht...
vue helloworld
01-20
1安装node 环境 https://www.jianshu.com/p/dd7fbb101fc0 这里需要本地的文件中~ 用户目录下使用淘宝mirror. 按照提示vuｅ　程序，ｎｐｍ　ｒｕｎ　ｓｅｒｖｅ 不是ｓｅｒｖｅｒ． 2更改对应的文件 2.1.参考博文：  hello wolrd 的例子： https://blog.csdn.net/qq_38738510/article/details/101013380 查看有无问题： 新版本的有ｖｕｅ编译模式的区别。 乱码问题： 前天使用utf- 8  模式处理 3.相关demo学习 https://github.com/TigerChain/
HTML之Vue框架实现Hello World
你的大数据学长
02-17 3747
HTML之Vue框架实现Hello World什么是Vue代码结果图 什么是Vue Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 代码 该代码可在我的GitHub中找到，链接在此 <!DOCTYPE html>...
vue怎么运行html,怎样运行一个vue.js项目
weixin_39777464的博客
06-21 1146
怎样运行一个vue.js项目？下载并安装node，安装过程很简单，一路“下一步”就可以了，安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。在命令行中输入 npm install -g cnpm --registry=http://registr...
vue.js helloword
weixin_30695195的博客
06-08 95
下载https://vuejs.org/js/vue.js （复制粘贴也行） 　　新建html 　　引入vue 　　 <html> 　　<head> 　　　　<meta charset = 'utf-8'> 　　</head> 　　<script src="vue.js" type="text/javascript...
hello-worlds：Hello world应用程序，用于处理角度，React，平滑和vue
02-05
假设： 只有最简单的基本hello world应用 删除所有测试和测试命令以及测试的依赖项 必须在主要组件上说“ Hello World” 仅包括最少的组件（理想情况下为1） 没有路由，没有多余的东西 没有造型 没有其他的 ！...
一个最基本的vue程序
最新发布
11-15
一个vue程序的Hello World！展现了基本的Vue程序的组成 用html编辑器打开运行即可 一个vue程序的Hello World！展现了基本的Vue程序的组成 用html编辑器打开运行即可 一个vue程序的Hello World！展现了基本的Vue程序...
VUE入门1
08-03
你可以在此基础上创建组件，利用Vue的响应式数据绑定和指令进行页面交互。 Vue提供了丰富的官方文档，详细介绍了其模板语法、组件化、路由、状态管理等方面的内容。为了深入学习Vue，建议参考官方文档并实践相关...
vue设置一开始进入的页面教程
10-16
默认情况下，Vue Router可能会将`HelloWorld.vue`设置为首页。我们要做的是将`Login.vue`设为新的首页。打开`router/index.js`，替换原有的路由配置： ```javascript import Vue from 'vue'; import Router from '...
webpack搭建vue 项目的步骤
08-28
Webpack 搭建 Vue 项目的...使用浏览器打开 index.html 文件，即可看到 Vue 项目的运行结果。 本文详细讲解了如何使用 Webpack 搭建 Vue 项目，包括前期准备、创建项目、引入 Webpack、引入 Vue、引入 Babel 等步骤。
VUE介绍+HelloWorld
小生不才的博客
10-28 932
1.MVVM思想 M：即 Model，模型，包括数据和一些基本操作 V：即 View，视图，页面渲染结果 VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉） 在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到Model 中。 而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model和 View 之
HTML页面中简单使用Vue
老婆就是要败家
07-15 8473
Vue入门案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>快速入门</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app">
Vue--安装与HelloWord--MVVM模式小实例
weixin_30920513的博客
04-21 71
1.官网下载开发板vue.js文件 2.HelloWorld! 3.MvvM实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>helloworld</title> ...
Vue在HTML中如何使用
热门推荐
super码力的博客
04-12 1万+
Vue如何使用，如何关闭生产提示
html页面使用vue的几种情况
胡萝卜先生的进阶之路
04-14 3211
DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > 弹窗首页 < / title >
Vue项目运行及入口HTML文件浏览器运行问题
weixin_41423107的博客
11-03 1751
Vue项目运行及入口HTML文件浏览器运行问题 一、Vue项目在命令提示符运行 npm run dev (注意：需要在创建的Vue项目目录下运行，否则报错，用CD myvue进行转换到自己创建的相应的目录下） 二、入口页面HTML文件浏览器运行 创建后原本的index.html源代码： 需要在head里面引入vue.js，否则显示不了js代码。 <script src="C:\Users\Administrator\myvue\node_modules\vue\dist\vue.js">&l
vue.js项目html页面,vue.js中如何运行项目？
weixin_33835558的博客
06-04 1080
vue.js中如何运行项目？下面本篇文章给大家介绍一下如何运行vue项目，通过示例代码介绍。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。运行vue.js项目1、下载并安装node，安装过程很简单，一路“下一步”就可以了，安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。2、npm包管理器，是集成在node中的，所以，直接输入 np...
vue.js基本使用 利用webpack"热"运行vuejs+html初步和关键步骤 <二>
design321的专栏
01-31 779
接着上一篇文章，配置如下: webpack.config.json var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpack = require('webpack'); module.exports = {     entry:{         "index":[__dirname+'/src/js
vue基础能运行的.html,Vue之模板语法
weixin_30425639的博客
07-08 489
Vue尤雨溪：Vue.js的创建者⚫ 2014年2月，Vue.js正式发布⚫ 2015年10月27日，正式发布1.0.0⚫ 2016年4月27日，发布2.0的预览版本Vue的简介Vue:渐进式javascript框架声明式渲染--->组件系统---->客户端路由---->集中式状态管理----->项目构建易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开...
用vue写个helloworld
04-13
当然可以，下面是代码示例： ```html <!DOCTYPE html> <html> <title>Hello World ...运行上述代码，你就可以看到一个简单的 Hello World!。 请注意，此代码仅是示例，不应在生产环境中使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值