vue学习

在调用函数的时候，在参数前加上$
格式化代码：Shift + Alt + F
DOM树简单理解学习：https://www.cnblogs.com/cjeandailynotes/p/10508623.html

1、安装vue及其注意点
安装教程：https://www.runoob.com/vue3/vue3-install.html
1)、问题：vue : 无法加载文件 C:\Users\Administrator.YB-202103151210\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 abou
t_Execution_Policies。
解决：win + x 打开Windows PowerShell，然后输入set-ExecutionPolicy RemoteSigned，最后输入A
2)、问题：如果遇到npm不可用。
解决：下载node.js文件安装即可
3)、问题：源文本中存在无法识别的标记
解决：使用双引号或者单引号包住依赖名
cnpm install -g @vue/cli 变为cnpm install -g ‘@vue/cli’
打包项目语句：cnpm/npm run build
4)、问题：npm ERR! path C:\Users\Administrator\AppData\Roaming\npm\node_modules@vue\cli\node_modules\cross-spawn\node_modules\semver npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'C:\Use
解决：将"C:\Users\Administrator\AppData\Roaming\npm\node_modules"路径下的@vue/cli删除，然后重新下载@vue/cli
5）、code EUNSUPPORTEDPROTOCOL npm ERR! Unsupported URL Type “npm:”: npm:vue-loader@15.9.8
npm版本太低，需要升级版本
6）、npm does not support Node.js v14.13.1 You should probably upgrade to a newer version of node
解决：node.js版本与npm版本不符合
查看对应版本的网址：https://nodejs.org/zh-cn/download/releases/
7）、如果将npm升到最高级，没办法降下来还是报6)的错，删除node.js文件，重新安装node.js文件

2、创建项目
先安装一个老母鸡: 专门用于反复生成脚手架项目文件夹结构的命令行工具。
a. npm i -g @vue/cli
b. 强调: 一台电脑，无论将来要做多少个项目，老母鸡(vue/cli)只需要首次使用时安装一次即可！
为啥呢：因为已经安装到全局的配置文件中，所以在本台电脑上都可用
c. 看到: + @vue/cli@4.5.11，说明安装成功
(2). 用老母鸡为某一个新项目下一个蛋: 其实就是为新项目生成一套全新的标准的文件夹结构
a. 在硬盘上打开要创建项目的文件夹，在地址栏里输入: cmd 回车
b. 在弹出的命令行窗口中，输入: vue create 自定义项目名称
c. ? Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? (Y/n) y
d. ? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
预览
> Manually select features
e. ? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
( ) Choose Vue version
() Babel //将时髦的es6,7,甚至更新的版本翻译为多数浏览器都能支持的es5等效代码
( ) TypeScript
( ) Progressive Web App (PWA) Support
() Router //就是SPA应用的核心模块:vue-router
( ) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
f. ? Use history mode for router? (Requires proper server setup for index fallback in production)(Y/n) n
其实vue中有两种路由方式:
1). hash方式，默认方式: #/index #/details
2). history方式: /index /details，但是history方式会和服务器端地址混淆，所以必须服务器端提供相应的处理功能才能启用history模式。
g. ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
> In package.json
h. ? Save this as a preset for future projects? (y/N) N
i. 等待…
j. 结果: 看到Successfully created project xzvue. 就算项目的脚手架代码创建成功

3、安装elment-ui和axios
npm i element-ui -S
npm install --save axios
element-ui 是网站快速成型工具，桌面形状的组件
elment-ui网址：https://element.eleme.cn/2.13/#/zh-CN

4、删除node_modules文件
npm install rimraf -g
rimraf node_modules

5、v-if/v-for
1、条件语句：v-if
v-if，v-else-if，v-else，
v-show=“ok”;return{ok:true} //就会输出，false就不会输出
v-bind传对象

<div class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
 isActive: true,
 hasError: false
}

2、循环语句：v-for
可以在template中使用
通过对象的属性来实现，即直接循环就可以获取对象的值。也可以(value, key, index) in object
也可以循环整数

6、计算属性/监听属性/组件prop
1、计算属性：computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
在重新赋值的时候，会调用setter函数，重新给函数赋值并输出新赋的值
2、监听属性 watch，我们可以通过 watch 来响应数据的变化
一个值变化另一个值也同时变化
异步加载中使用 watch
3、组件prop：prop 是子组件用来接受父组件传递过来的数据的一个自定义属性

7、样式绑定
div中的class属性，可以使用多个class进行样式的绑定
事件修饰符：

<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> 
<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> 
<!-- 修饰符可以串联  --> <a v-on:click.stop.prevent="doThat"></a>
 <!-- 只有修饰符 --> <form v-on:submit.prevent></form> 
<!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> 
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>

按键修饰符：Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
.exact 修饰符：允许你控制由精确的系统修饰符组合触发的事件

8、表单
1、text 和 textarea 元素使用 value 属性和 input 事件；返回中由message或者message2可以直接使用

<input v-model="message"placeholder="编辑我……">
<textarea v-model="message2"placeholder="多行文本输入……"></textarea>

2、checkbox 和 radio 使用 checked 属性和 change 事件
input绑定复选框时，可以用将数据得到并输出

<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
input绑定单选框
<input type="radio" id="google" value="Google" v-model="picked">

3、select 字段将 value 作为属性并将 change 作为事件

<select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
   <option value="www.runoob.com">Runoob</option>

9、各功能注意点
1、要创建一个删除按钮或者编辑按钮，在el-table-column里面加入template标签
2、判断符： || 或 && 与 !token 非
3、this.$router的用法

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由

4、created()函数，打开该页面就会调用该函数

使用关键字 var 来定义变量， 使用等号来为变量赋值