vue的基础

最新推荐文章于 2024-11-15 00:07:13 发布

大豆博文

最新推荐文章于 2024-11-15 00:07:13 发布

阅读量269

点赞数

分类专栏： vue vueapp基础 js 前端文章标签： vue 框架

前端同时被 3 个专栏收录

32 篇文章

订阅专栏

25 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

本文介绍Vue.js的基础概念，包括其特点、应用场景及如何使用Vue CLI脚手架搭建项目。同时，详细讲解了基本的Vue指令如v-model和v-for的用法，并对比了v-if与v-show的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue

构建脚手架应用

npm install vue-cli -g

vue init webpack 《temple-name》项目名

模板名：webpack pwa simple webpack-simple browerify browerify-simple

cd 项目名

npm install 安装项目依赖

npm run dev 执行项目文件

依赖的环境 node =》 npm

vue 的脚手架搭建好的一个工程

npm install vue-cli -g   安装脚手架

vue是什么？ view 视图

是一套用于构建用户界面的渐进式框架；

渐进式？

由底层向上开发

vue的特点？

mvvm m model 模型 v view 视图 vm 数据交互的过程

简洁

组件化

模块化

双向数据绑定

vue 的应用场景？

构建单页面应用

webpack hotupdate 热更新不用刷新直接显示数据

index.html 主文件 main.js index.js app.vue helloword.vue

创建vue项目

vue init webpack project(项目名称）

下载好后，安装依赖，启动运行http://localhost：8080端口

OK成功界面

template 支持根元素，否则error；

<template>
hello word
</template>
<script></script>
<style></style>

正常template

<template>
<div>
hello word
<div>
hellow vue</div>
</div>
</template>
<script></script>
<style></style>

单个div,支持一个根元素

<template>
<div>hello word</div>
</template>
<script></script>
<style></style>

根元素只支持一个，多余error；

<template>
<div>hello word</div>
<div>vue</div>
</template>
<script></script>
<style></style>

指令：

v-model 双向数据绑定

v-for:循环

<template>
  <div id="app" class="app">
    <!-- 双向数据绑定 -->
   <!-- <input type="text" v-model="title"/>
{{title}} -->
<div v-for="(item,index) in arr">{{index}}{{item}}</div>
<div v-for="(item,index) of arr">{{index}}{{item}}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){

    return{
      title:'hellow vue',
      arr:['1','2','3','4']
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>