Vue入门，8大基本用法

已于 2022-10-25 10:25:20 修改
阅读量1.4k 收藏 8
点赞数
分类专栏： VUE 文章标签： vue.js javascript 前端
于 2022-08-18 18:19:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31591237/article/details/126410997
版权

Vue基础及应用

简介

Vue是一套用于构建用户界面的渐进式框架，核心是一个采用简洁的模板语法来声明式地将数据渲染进DOM的系统。

基础用法

1. 起步

Vue 的两个核心功能：

  • 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，让我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

  • 响应式：Vue会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。

代码示例：

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

运行结果：      

Vue可以将数据和DOM进行关联，使我们不再和HTML直接交互。

该示例通过"el: '#app'"将Vue挂载到div元素上，HTML使用“Mustache”语法 (双大括号)进行数据绑定，div中message的取值即为vue中data.message的值，修改data.message的值页面显示的内容就会发生变化。

2.v-bind

除了文本插值，还可以v-bind来绑定元素attribute

<div id="app">
  <button type="button" v-bind:disabled="isDisabled">测试按钮</button>
</div>
var app1 = new Vue({
  el: '#app',
  data: {
    isDisabled:true
  }
})

运行结果：

Vue将这个button元素的disabled attribute和Vue实例的data.isDisabled进行了绑定，data.isDisabled值为true所以按钮不可以，如果将data.isDisabled的值改为false则按钮会变为可用

v-bind还可以简写成只使用冒号“:”，日常项目中建议使用简写

简写代码：

<div id="app-1">
  <button type="button" :disabled="isDisabled">测试按钮</button>
</div>

除了可以绑定data，还可以绑定方法

<div id="app">
  <button type="button" :disabled="checkDisabled">测试按钮</button>
</div>
var vm = new Vue({
  el: '#app',
  data: {
  },
  methods: {
    checkDisabled() {
      if(Math.random() > 0.5) {
          return true
      } else {
          return false
      }
    }
  }
})

取值为绑定方法的返回值，如果Math.random()随机出的数字大于0.5则返回true，运行结果为：

3.v-model

v-model用于实现双向数据绑定。

双向数据绑定：数据不仅能从data流向页面，还可以从页面流向data

代码示例：

<div id="app-3">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    message: ''
  }
})

运行结果：

初始只有一个文本输入框

当在输入框输入内容后

该示例使用v-model将input输入框和message进行了绑定，在输入框进行输入操作，输入框改变了message的值，从而改变p元素显示的内容

4.v-on

用 v-on 指令监听 DOM 事件，并在触发时运行对应方法

代码示例：

<div id="app-2">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

运行结果：

点击按钮后：

该示例通过v-on绑定了click事件和reverseMessage方法，点击“反转消息”按钮后会触发click事件并执行reverseMessage方法，reverseMessage方法将message文本反转并重新赋值给message，从而改变了p元素显示的内容

v-on还可以简写成"@"，日常项目中建议使用简写

简写代码：

5.v-if

v-if用于条件判断，同时还可以配合v-else-if和v-else指令给v-if添加一个"else if"、"else"代码块

代码示例：

<div id="app4">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
var app4 = new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})

运行结果：

 

如果将type的值改为E，则运行结果如下：

6.v-for

v-for用于循环遍历数组，v-for指令需要以 site in sites 形式的特殊语法，sites 是源数据数组，site是数组元素迭代的别名

代码示例：

<div id="app-5">
  <ol>
    <li v-for="item in todos">
      {{ item.text }}
    </li>
  </ol>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

运行结果：

7.watch

vue提供了监听属性watch，可以通过watch来监听数据的变化

代码示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="watch_props">
  千米 : <input type="text" v-model="kilometers">
  米 : <span>{{ meters }}</span>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#watch_props',
    data: {
      kilometers: 0,
      meters: 0
    },
    watch: {
      kilometers: function (newValue, oldValue) {
        this.meters = newValue * 1000
      }
    }
  });

</script>
</body>
</html>

代码示例有一个input输入框“千米”和一个文本显示“米”，分别对应绑定了data属性中的kilometers和meters，kilometers 和 meters 初始值都为0，同时使用watch创建了data.kilometers的监听

当“千米”输入框输入内容时会改变data.kilometers的值从而触发kilometers的监听，监听器会执行kilometers监听方法将kilometers的值乘以1000并将计算结果复制给meters，此时米对应显示的数字会自动发生变化

 

8.computed

Vue提供了计算属性，用来处理一些复杂逻辑的计算

代码示例：

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

运行结果：

-----------------------------------------------------------分割线

Vue生命周期

说明

每个实例都有一个属于它的生命周期，实例创建、数据初始化、挂载、更新、销毁的过程就是一个生命周期。

模版：

<div id="app">
  {{ message }}
</div>

数据： 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

生命周期可以简单理解为三部分：

（1）初始化阶段的钩子函数（初始化Vue实例的过程）：

beforeCreate：实例创建前：数据和模板均未获取到 created：实例创建后: 可访问到 data 数据，但模板未获取到 beforeMount：数据挂载前：模板已获取到，但是数据未渲染到模板上 mounted：数据挂载后： 数据已渲染到模板中

（2）更新阶段的钩子函数（数据渲染、更新Dom的过程，可重复）：

beforeUpdate：模板更新前：data 改变后，更新数据模板前调用 updated：模板更新后：将 data 渲染到数据模板中

（3）销毁阶段的钩子函数（销毁实例的过程）：

beforeDestroy：实例销毁前 destroyed：实例销毁后

钩子函数：

var vm = new Vue({
    el:'#app',
    data:{
        msg:'测试钩子函数'
    },
    beforeCreate() {
        console.log('beforeCreate')
    },
    created() {
        console.log('created')
    },
    beforeMount() {
        console.log('beforeMount')
    },
    mounted() {
        console.log('mounted')
    },
    beforeUpdate() {
        console.log('beforeUpdate')
    },
    updated() {
        console.log('updated')
    },
    beforeDestroy() {
        console.log('beforeDestroy')
    },
    destroyed() {
        console.log('destroyed')
    }
 })

使用

生命周期中每一个钩子函数在特定的阶段执行，可以利用不同钩子函数的特性，实现不同的功能。实际使用时可根据需求选择使用对应的钩子函数。比如：

created钩子函数中可以用来接收路径参数，将接收到的值赋值给data中对应的字段

mounted钩子函数中可以用来发送异步请求去后端获取数据，将后台数据赋值给data中对应的字段，从而改变页面显示内容

var app2 = new Vue({
  el: '#app-2',
  data: {
    orderId : '',
    orderDetail: {}
  },
  methods: {
    getDetail(orderId) {
      orderApi.orderDetail(orderId).then(data => {
        this.orderDetail = data
      })
    }
  },
  created() {
    this.orderId = this.$route.params.orderId
  },
  mounted() {
    this.getDetail(this.orderId)
  }
})

以上为Vue最基础且常用的内容，更多详细教程可参考三方网站：

Vue.js 介绍 — Vue.js 中文文档

Vue.js 教程 | 菜鸟教程

Element - The world's most popular Vue UI framework

项目应用

项目结构

整体结构

|-- build ---- 构建脚本文件夹

|--build.js ---- 生产环境构建脚本

|--check-version.js ---- 检查npm、node.js版本

|--utils.js ---- 构建相关工具方法

|--vue-loader.conf.js ---- 配置css加载器以及编译css之后自动添加前缀

|--webpack.base.conf.js ---- webpack基本配置

|--webpack.dev.conf.js ----- webpack开发环境配置

|--webpack.prod.conf.js ---- webpack生产环境配置

|-- config ---- 项目配置文件夹

|-- dev.env.js ---- 开发环境变量

|-- index.js ---- 项目配置文件

|-- prod.env.js ---- 生产环境变量

|-- dist ---- 打包文件目录，执行打包命令后生成

|-- node_modules ---- npm加载项目的依赖模块，安装依赖后生成

|-- src ---- 源码文件夹（名称不可修改）

|-- assets ---- 资源文件夹，比如存放 css，图片等资源

|-- components ---- 组件文件夹，用来存放公共组件

|-- icons ---- 图标文件夹，用来存放svg等图标文件

|-- pages ---- 页面文件夹，用来放路由指向的主体页面

|-- router ---- 路由文件夹，用来存放路由配置文件

|-- service ---- 服务文件夹，用来存放定义后台接口请求方法文件

|-- store ---- 全局存储文件夹，用来存放权限、菜单状态等文件

|-- utils ---- 工具文件夹，用来存放各种工具类

|-- App.vue ---- 项目主组件，所有页面都是在该组件下进行切换的

|-- main.js ---- 项目入口js文件，作用是初始化 vue 实例，并引入所需要的插件

|-- static ---- 静态资源文件夹，不会被webpack构建

|-- index.html ---- 入口html页面

|-- package.json ---- npm包配置文件，定义项目的npm脚本、依赖包等信息

|-- README.md ---- 项目的说明文档，markdown格式

|-- .xxx ---- 各类配置文件，比如代码风格校验、git忽略文件等配置文件

重点目录及文件

整体结构只需简单了解即可，日常开发主要关注下几个重点目录及文件

  • config/index.js

本地开发调试前端代码时需单独启动前端项目，前端项目启动后浏览器访问的host和端口需要在该文件中配置。配置示例如下：

host: 'xxxucgoodstest.xxx.com', 
port: 80,

前端调用后台接口可能存在域名或端口不一致问题，可通过配置config/index.js中的proxyTable解决。proxyTable用的是http-proxy-middleware中间件，该中间件本质上是在本地开了一个服务器dev-server，所有的请求都通过这里转发出去，即把浏览器的发送请求代理转发到代理服务器上，再由代理服务器发送请求给目标服务器，从而解决跨域问题。配置示例如下：

proxyTable: {
  '/wapi': {
    target: 'http://zucheucgoodstest.zuche.com:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/wapi/': '/zucheucgoods/wapi/'
    }
  }
}

  • src/*

日常需求代码主要都在src文件夹对应目录下开发

src/components：全局公共组件

src/pages：页面代码

src/router：页面路由配置

src/service：后台接口请求定义

src/utils：公共工具类

  • package.json

类似于JAVA项目的pom.xml，如要引入其他前端项目或三方的npm包，需在package.json配置具体的包名和版本

"@zuche/ucar-vue": "1.3.6",
"@car/mmc-element": "^0.4.1",
"@car/car-admin-vue": "latest",

版本号可直接指定，也可在版本号前加 ^、~等

~：代表匹配最近的小版本依赖包，比如~1.2.3会匹配所有1.2.x版本，但是不包括1.3.0

^：代表匹配最新的大版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0

*或latest：代表安装最新版本的依赖包

服务启动与关闭

确认本地node版本，公司服务器默认使用8.9，本地建议使用8.9，最高不要超过10

1.安装依赖

cd到前端项目目录，然后执行npm install命令安装项目依赖

 

2.确认配置

查看config下的index.js文件的配置，域名一般配置成测试环境域名，便于登录状态的获取

 

3.修改本地hosts文件

将测试域名指向127.0.0.1，可直接修改系统中的hosts文件，windows系统也可下载SwitchHosts去管理hosts

 

4.启动服务

 启动前端项目前要确认后端服务可用

在前端项目目录中，执行npm run dev，项目启动成功后控制台会有Compiled successfully提示

 

 服务启动后可浏览器直接输入页面地址进行访问，也可到caradmin中访问

 

5.关闭服务

按键盘Ctrl+C，控制台输入Y即可关闭前端服务

 

 

UI组件库

UI组件库就是按照组件化设计规范与组件化编码规范，使用统一的风格样式封装的一整套常用的UI组件，能大幅提高设计研发的效率及质量

目前公司内部使用的ui组件库是Element UI，同时公司前端团队基于租车后台系统的业务需求和使用场景在Element UI的基础上又二次封装了部分常用组件

Element UI

官方网址：Element - 网站快速成型工具

组件列表：

Basic基础组件

Layout 布局

Container 布局容器

Color 色彩

Typography 字体

Border 边框

Icon 图标

Button 按钮

Link 文字链接

Form表单相关

Radio 单选框

Checkbox 多选框

Input 输入框

InputNumber 计数器

Select 选择器

Cascader 级联选择器

Switch 开关

Slider 滑块

TimePicker 时间选择器

DatePicker 日期选择器

DateTimePicker 日期时间选择器

Upload 上传

Rate 评分

ColorPicker 颜色选择器

Transfer 穿梭框

Form 表单

Data数据相关

Table 表格

Tag 标签

Progress 进度条

Tree 树形控件

Pagination 分页

Badge 标记

Avatar 头像

Skeleton 骨架屏

Empty 空状态

Descriptions 描述列表

Result 结果

Notice提醒相关

Alert 警告

Loading 加载

Message 消息提示

MessageBox 弹框

Notification 通知

Navigation导航相关

NavMenu 导航菜单

Tabs 标签页

Breadcrumb 面包屑

PageHeader 页头

Dropdown 下拉菜单

Steps 步骤条

Others其他

Dialog 对话框

Tooltip 文字提示

Popover 弹出框

Popconfirm 气泡确认框

Card 卡片

Carousel 走马灯

Collapse 折叠面板

Timeline 时间线

Divider 分割线

Calendar 日历

Image 图片

Backtop 回到顶部

InfiniteScroll 无限滚动

Drawer 抽屉

使用方式

1.确定组件，根据需求及原型设计去Element UI官网组件库查找符合要求的组件。

比如页面要实现一个日期选择功能，在Element UI官网组件库查找发现有两个组件和日期相关，分别为“DatePicker 日期选择器”和“DateTimePicker 日期时间选择器”，由于需求只要求选择日期所以可确定使用“DatePicker 日期选择器”组件。

2.确定组件具体展示形式，Element UI官网每个组件都会提供各种支持的形式，比如“DatePicker 日期选择器”组件可支持选择日、周、月、年，还可实现选择日期范围

 

3.复制代码

确定好组件具体形式后，点击“显示代码”即可查看组件具体的使用代码，直接将代码复制到自己开发的vue页面即可

 

 

4.调整代码

如果Element UI提供的代码不完全满足需求，可以参考组件介绍页面下面的完整属性介绍，通过修改组件的属性去实现想要的效果

 比如“DatePicker 日期选择器”组件选择日期后默认会出现“清空”图标，但需求要求日期选择完成后不能清空，则不能展示该图标

 查询文档后发现DatePicker组件有一个clearable属性，默认是true，所以默认会出现“清空”图标

 将DatePicker组件的clearable设置成false后，发现清空图标消失了

<el-date-picker
    :clearable=false
    v-model="value1"
    type="date"
    placeholder="选择日期">
</el-date-picker>

 

5.复杂组件

上面举例的“DatePicker日期选择器”组件相对简单，比如要实现一个相对复杂的表单功能，就要使用“Form 表单”组件，该组件由el-form和el-form-item组成，整个表单为一个el-form，每一个表单项为一个el-form-item

如下面截图和代码示例，整个表单使用el-form标签，每一项比如“活动名称”、“活动区域”为一个el-form-item。el-form-item的label属性为展示的表单项名称，el-form-item内使用具体的组件实现表单项输入，比如“活动名称”使用el-input实现文本输入公共、“活动区域”使用el-select实现下拉选择功能。将各个独立的组件组合到一起就可实现相对复杂的样式

 

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
  <el-form-item label="活动名称">
    <el-input v-model="sizeForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="sizeForm.type">
      <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
      <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
      <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="sizeForm.resource" size="medium">
      <el-radio border label="线上品牌商赞助"></el-radio>
      <el-radio border label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

编码规范

命名

  • 文件夹：采用下划线连接，例：demo_folder

  • 普通文件：采用短横线连接，例：demo-list.vue、demo-api.js

  • 自定义组件：采用大驼峰命名法，例：DetailContractInfo.vue

路径

  • 页面文件：在src/pages下建立对应页面文件夹，页面文件放入该文件夹下

  • 局部组件：放入相对应页面文件夹下的components子文件夹中

  • 全局组件：放入src/components文件夹下

橘子hhh
关注
专栏目录
Vue的基本使用
weixin_44529746的博客
10-31 3211
社区资料：Vue：Vue.js专业中文社区 vue官方手册：API — Vue.js 一、vue的介绍 vue是一套构建用户界面的渐进式框架，Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 vue是基于MVVM（M:model V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model) 补充： MVC设计模式： M model 数据层 V view 视图层 C control控制层
vue入门.pdf
10-10
vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
vue的基本使用
最新发布
m0_73381672的博客
05-29 1668
npm是JS的一个包管理程序，相当于后端的maven，Node Package Manager。
vue基础11（vue的简单使用）
weixin_30770495的博客
05-22 222
一、安装 对于新手来说，强烈建议大家使用<script>引入 二、下载地址：https://vuejs.org/js/vue.js 三、 引入vue.js文件 我们能发现，引入vue.js文件之后，Vue被注册为一个全局的变量，它是一个构造函数。 四、使用Vue实例化对象 1.创建vue实例对象 <div id="app"> ...
Vue的用法
weixin_34209851的博客
11-28 151
一、介绍 1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。 Vue.js这两年火得...
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
SystemVue使用入门.pdf
06-04
SystemVue模拟环境的基本组成要素包括WorkspaceTree、Design、Sink、Analysis、Dataset和Display等。其中WorkspaceTree显示所有模拟文件，Design包括器件、模型、公式、数学语言等，Sink用于收集设计节点上的特定...
vue入门及实战应用
11-02
本篇内容将围绕"Vue入门及实战应用"这一主题，深入浅出地介绍Vue的核心概念、基本语法以及在实际项目中的应用。 1. **Vue核心概念** - **虚拟DOM**: Vue通过虚拟DOM技术，提高了UI渲染的性能，减少了不必要的DOM...
Vue基本使用
weixin_30500663的博客
04-29 2238
Vue.js是一款流行的开源JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。由尤雨溪在2014年2月发布的。 一 基本语法 1. vue的使用要从创建Vue对象开始 let vm = new Vue(); 2.创建vue对象 创建vue对象的时候，需要传...
Vue基础——Vue的基本使用
NGUP_LEE的博客
05-02 1376
文章目录一、基本使用步骤测试样例测试样例代码中MVVM对应关系图 一、基本使用步骤 导入Vue.js的script脚本 在页面中声明一个将要被Vue控制的DOM区域 创建VM实例对象（Vue实例对象） 测试样例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wi
Vue的使用
LINDYING的博客
03-01 2542
Vue的使用
Vue组件基础用法
weixin_34143774的博客
08-07 156
前面的话 　　组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法   概述 　　在 Vue 里，一个组件本质上是一个拥有...
Vue的基本用法1
weixin_31449201的博客
08-25 671
Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。 Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。 Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实...
VUE的基本使用。
qq_61576523的博客
04-06 8768
要想使用vue，你要先安装一个名字叫：Vscode这个软件，这个软件的安装，在这就不说了。在这里直接进行演示。 1，首先你要先创建一个文件夹， 把vue的jar包和jquery的jar包都放进去，然后再在里面创建一个文件，名字可以自定义，一开始创建好是一个空白，你输入！号后点击回车后会呈现出这个界面。 2.写导入jar包的代码。 我在这里有新建了一个文件夹js放，把这两个jar包都放到了js里面所以他的导入jar包的代码是这样的： <script src="js/vue.js" ty
vue基本用法1
weixin_46688332的博客
03-24 465
1.模板语法 1）Mustance语法(注：{{}}表达式） 效果展示： 2）v-html 、v-text v-html:会将文本理解成为一个标签，输出的是一个HTML，而v-text展示出来的是一个文本 效果展示： 3）绑定事件监听 v-on（v-on的缩写是@） v-on:用来监听DOM事件，监听的事件要写在methods方法中 <button v-on:click="btn">事件绑定</button>也可以写为 <button @clic.
Vue基本用法
一掬净土
04-20 933
引入对应js--> script type="text/javascript" src="lib/vue.js">script> script>     window.onload=function(){         var vue = new Vue({             el:"#box",//选择器             data:{            
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值