Vuejs01--安装&&HelloWorld

已于 2022-12-08 18:26:27 修改
阅读量113 收藏
点赞数
分类专栏： 前端 文章标签： vue
于 2020-03-19 16:15:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaxing4615/article/details/104965036
版权

Vue渐进式框架

  • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中。
  • 或着你希望将更多的业务逻辑用Vue实现。那么Vue的核心库及其生态系统比如Core+Vue-router+Vuex 可满足你各种各样的需求

MVVM模式

  • Model: 模型层，在这里标识JavaScript对象
  • View: 视图层，在这里表示DOM
  • ViewModel：连接视图和数据的中间件—数据双向绑定
    在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
  • ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
  • ViewModel 能够监听到视图的变化，并能够通知数据发生改变

安装

  • 直接CDN引入
 	    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">(开发环境版本。包含了有帮助的命令警告)
 		 <script src="https://cdn.jsdelivr.net/npm/vue"></script>（生产环境版本，优化尺寸和速度）
  • 下载引入
    去挂网下：

https://cn.vuejs.org/v2/guide/installation.html

第一个应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id='app'>{{message}}</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>

  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
  • 创建Vue对象
  • el属性：该属性决定了这个Vue对象挂载到哪一个元素上
  • data属性：通常存储一些数据
名字越长技术越强
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuejs 入门 - 1. Hello World
搞毛线的工程师
04-11 136
Hello World &lt;!doctype html&gt; &lt;html class="no-js" lang=""&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="x-ua-compatible" content=&q
actions-openwrt-helloworld：Actions使用精益的lede原始码编译包含helloworld服务固件
02-21
动作-openwrt-helloworld感谢和通过创建流程文件，在线编译helloworld服务固件；第一代passwall源码完全停止开发（开源源码已经可移除），基于vuejs脚本语言，焕新UI设计的第二代passwall由Lienol等大神们在专有库闭...
【VueJS】VueJS---渲染函数 & JSX
DreamSeeker_1314的博客
08-21 416
基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。 &lt;h1&gt; &lt;a name="hello-world" href="#hello-world"&gt; Hello world! &lt...
VueJS----[内部指令-1.4]----v-text & v-html
_cheny
07-23 135
v-text &amp;amp; v-html 我们已经可以在html中输出data中的值了，用的是{{xxx}}这种方式，但是这种方式是有弊端的，就是当我们网速很慢或者JavaScript出错的时候，会暴露我们的{{xxx}}。因此Vue给我们提供了v-text，就是解决这个问题的 &amp;lt;span&amp;gt;{{ message }}&amp;lt;/span&amp;gt;=&amp;lt;span v-text=&quot;
vuejs代码-从helloworld开始
chuohen8962的博客
11-25 114
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome...
vue-progressbar-component:[CSS GPU动画] vuejs的简单进度栏
05-14
vue-progressbar-component [ ] vuejs的简单进度... component ( 'progress-bar' , ProgressBar ) 或者，您可以执行以下操作来注册组件： // HelloWorld.vueimport ProgressBar from 'vue-progressbar-component'expor
zcui-vue:适用于zcui项目的Vuejs变体
05-14
安装npm install --global zcuizcui init HelloWorld --target vue cd HelloWorld可用命令# start development server$ npm run dev# create production build$ npm run prod#analyze dependencies$ npm run analyze...
hello-vuejs:Hasura快速入门Vue.js样板
05-19
Vue.js Hello World快速入门 是用于构建用户界面的渐进框架。 核心库仅集中在视图层，并且易于拾取并与其他库或现有项目集成。 该项目利用vue-cli来构建带有Webpack模板，用于商店管理的vuex和用于路由管理的vue-...
vuetranslate:VueJS插件翻译
05-17
Vue翻译 一个VueJS（1.x，2.0+）插件，用于基本翻译。 这是什么？ 是一个用于处理组件基本翻译的插件，它添加了mixin和指令以最舒适的方式对其进行处理。... {{ t('Hello World') }} <span v-transl
js base64编码格式图片另存为下载
热门推荐
gaxing4615的博客
10-03 1万+
js base64编码格式图片另存为下载
Vue05--v-if、v-show、filters(过滤器)、v-model
gaxing4615的博客
03-23 1110
v-if v-else-if v-else 条件判断。当其为true是会渲染数据和显示dom元素。否则不会显示。 <div v-if="fSize==10">显示true</div> <div v-else-if="fSize<10">显示else </div> <div v-else>显示false</div>...
ie 浏览器直接打印与非ie
gaxing4615的博客
06-17 850
ie表单数据打印
Vuejs02--单数据、多数据v-for、事件监听--点击事件
gaxing4615的博客
03-20 699
语法 单数据： <div id="app"> {{messgae}} </div> </body> <script> /* 特点：数据和元素分离 以前：命令式编程 现在 ：声明式编程 let与const */ const app=new Vue({ el:"#app", // 挂载需要管理的元素--将数...
JS拼接html代码后 类点击事件无效
gaxing4615的博客
03-08 532
原代码 $('.typeName').click(function() { console.log(111111111111) $(this).addClass('activeType') $(this).siblings().removeClass('activeType') }) 修改后 $(document).on("click", ".typeName", function () { alert('弹窗'); }); } .
JS常用高阶函数-filter、map、reduce
gaxing4615的博客
12-15 372
JS高阶函数filter、map、reduce
Vuejs04--v-once、v-html、v-text、v-pre、v-cloak、v-bind、v-bind 样式、computed 计算属性
gaxing4615的博客
03-20 364
vue基本指令学习
Vuejs--14 plugin插件、BannerPlugin、HtmlWebapckPlugin
gaxing4615的博客
04-01 305
plugin是什么 plugin是插件的意见。通常是用于对某个现有的架构进行扩展 webpack中的插件，就是对webpack现有功能的各种扩展，不如打包优化，文件压缩等等 loader和plugin的区别 loader主要用于转换某些类型模块，它是一个转换器。 plugin是插件，它是对webpack本事的扩展，是一个扩展器。 plugin使用 1、通过npm安装工需要使用的plugins(某些...
js字面量创建对象
gaxing4615的博客
03-22 293
//ES6 const name='xusxxx'; const run=function(){ } const person3={ name, run } // ES5 var person={ name:'xusx', run:function(){ } } var person2={...
vue.esm.js:5105 [Vue warn]: data functions should return an object: https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function found in ---> <HelloWorld> at src/components/HelloWorld.vue <App> at src/App.vue <Root>
最新发布
06-07
这个警告表示，在组件中定义的 data 选项是一个对象，而不是一个函数。Vue 的官方文档指出，data ... name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App' } } } ``` 这样就能避免警告了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值