Vue学习笔记(转载)

59 阅读1分钟

入门知识点

文本:{{}}双花括号 (插值语法)

属性:v-bind: 绑定属性 可省略,只写冒号:

事件:v-on: 绑定事件 可省略,只写@

注:如果要在函数里面使用Vue中的数据,可以使用this来访问

创建Vue项目

配置开发环境 使用Node.js环境开发,

cmd安装vue/cli 创建项目hello,建议在对应的目录下创建 启动服务器

命令: npm install -g @vue/cli 安装脚手架

vue create hello 创建项目hello

运行项目

cd hello

npm run serve

组件化开发概述

什么是组件化呢? 就是我们在html中进经常要用到标签,但是总有我们需要的标签HTML提供不了,所以,组件化开发就是,我们开发的.vue文件(又叫vue组件)作为html中的标签来使用。

例如我们可以开发.vue登录组件或者.vue轮播图组件然后插入到HTML中

优点:简洁与复用

项目结构概述

3dabfc579e6d49d99777b37de41bc311.png

1 后缀.vue是我们上文中提到的组件,

2 main.js是主文件,用于对应id与对应的组件(App.vue)

3 components意为组件,一般我们自己开发的,也就是自定义的组件就放在这个目录下

在vue中