vue项目各文件及基本语法

vue脚手架创建项目

vue create [项目名]

脚手架目录文件

•   **node_modules文件夹：** 放项目依赖的文件
​
•   **public文件夹：**放置共用的静态资源，这里面的文件打包时原封不动的直接被放置在dist文件夹里
​
•   **src：**源代码文件夹
​
•       **assets文件夹：**放置静态资源，assets文件夹下的文件会打包成模块
​
•       **conponents文件夹：**放非路由组件
​
•       **App.vue文件：**唯一的根组件
​
•       **main.js文件：**入口文件[程序最先执行的文件]
​
•       **babel.config.js文件：**babel配置文件
​
•       **package.json：**项目的描述、项目依赖、项目运行指令
​
•       **README.md：**项目说明文件

 

vue中的插值语法

作用：用于解析标签体的内容

用法：{{ 这里写js表达式且可以直接读取data中的属性值 }} 

vue中的指令

v-html：向指定元素中可以添加内容会渲染html标签

v-bind: (可简写为 : )： 单向数据绑定：数据只能从data中到页面

v-model:  双向数据绑定 数据可以从data中到页面也可以从页面到data中

v-on:[事件名]（可简写为 @[事件名]）：用于绑定事件

v-show：不展示的DOM元素，使用样式隐藏 （用于切换频率较高的元素）

v-if：不展示的DOM元素直接移除 （用于切换频率较低的元素）