Vue初步学习

Vue框架简介

MVVM模式的数据驱动框架，数据驱动的思想，重点关注数据，操作数据就可以

脚手架 vue-cli工具

vue脚手架指的是vue-cli它是vue官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface ) 命令行界面 。vue-cli是基于node环境利用webpack对文件进行编译、打包、压缩、es6转es5等一系列操作。之前我们已经下载好了node，①设置npm包管理的镜像为淘宝镜像
npm config set registry=https://registry.npm.taobao.org
将以上复制到终端回车运行。
②之后通过npm全局安装yarn包管理工具
npm install -g yarn （"-g" 全称是 " global (全局) " 表示全局安装。）
③安装完成后使用以下命令查看版本
yarn --version
④使用npm全局下载vue-cli工具
npm install @vue/cli -g(全局安装)这一步需要在有网络的环境下安装，会花费一些时间安装完成后会出现
输入vue -V 查看版本号 4.1.1
⑤接下来就可以使用vue-cli创建vue项目了
进入day11目录下，执行以下命令
vue create app
（1）.第二个 linter不选 使用空格切换
（2）.配置文件是独立的文件
（3）.不应用于下次创建的项目
（4）.yarn
在浏览器中输入localhost：8080出现界面则安装成功
⑥ 启动项目
cd app
yarn serve

熟悉vue项目结构

在下载完成之后，day11文件夹下会多来app文件夹，app文件夹下的node_modules中存放我们下载的依赖我们一般不做修改。
src文件夹下面存放的是我们项目代码以及一些文件。
components文件夹存放了我们自己写的组件。
router文件夹里面存放了路由配置。
mian.js是整个项目的入口js。
package.json 文件：当我们在命令行时 npm run dev 的时候程序执行的是package.json文件的“script”脚本里的“dev”命令。

配置编写Vue代码的用户代码片段

打开VSCode–>左上角文件–>首选项–>用户代码片段输入vue,打开vue.json（或者vue，如果都没有则需要先下载Vue VSCode Snippets插件）进行编辑，将以下对象内的代码粘贴到该文件的对象内

"Print to console": {
"prefix": "vue",
"body": [
"<template>",
"  <div class=\"wrapper\">$0</div>",
"</template>",
"",
"<script>",
"export default {",
"  data() {",
"    return {",
"    };",
"  },",
"  computed: {},",
"  methods: {},",
"  created() {},",
"  mounted() {}",
"};",
"</script>",
"<style scoped>",
"</style>"
],
"description": "A vue file template"
}

创建Vue组件进行学习

写在前面：vue 组件要以标签的形式呈现为了符合 html / html5的规则，所以组件的标签化使用必须注册
template 标签
实例范围内使用
template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
实例范围外使用
实例范围外template标签是不会被直接解析的
1.下面我们来做一个表单，其中，用户的输入显示在页面上
v-model表单控件，数据模型双向数据绑定

• 点赞
• 收藏
• 分享
• 文章举报