AZURE060606的博客

现在浏览器输入服务器公网ip或者域名即可访问vue项目。设置安全组-80端口默认开放。安装nginx所需依赖。如果未配置可以自行设置。

pinia有三个概念stategetter和action，我们可以假设这些概念相当于组件中的datacomputed和methods另外，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，当你不需要让一个元素具有全局状态时，便不需要使用pinia。

用于在子组件中从父组件或根组件中注入已经创建的实例，如果不想使用也可以直接引入。

watchEffect函数不用指定监听谁，只要watchEffect内部用了某个变量，某个变量发送变化，就会触发。toRefs的作用将一个包含响应式对象属性的普通对象转换为包含 ref 对象的普通对象，通俗一点就是。都适用于不同场景，生产项目中，低复杂度场景用选项式API，单页应用用组合式API+单文件组件。函数用于监视一个数据，并在数据变化时执行特定的逻辑。该方法也是Vue2中所使用的，其特点是例如。等对象所定义的属性都会暴露在函数内部的。单文件组件中组合式API通常和。上，它会指向当前的组件实例。

自定义代理用于执行 HTTP 和 HTTPS 请求的代理。: 与请求一起发送的 URL 参数，必须是一个简单对象或。: 带有 xsrf token 值的 HTTP 请求头名称。: HTTP 请求内容的最大字节数（仅Node.js）: 在发送请求前修改请求数据的函数，仅适用于。: 用于解码响应的编码（Node.js 专属）: 定义对于给定的 HTTP 状态码是。: 创建请求时使用的方法，默认为。: 作为请求体发送的数据，适用于。: HTTP 响应内容的最大字节数。: 用于请求的服务器 URL。

具体环境配置请点这里记得新建配置时这里选vue31.选定路径后再cmd输入创建指令2.项目创建完毕后用webstorm打开项目3.安装依赖4.启动项目看到该页面即表示成功5.配置快速启动vue2ref和reactive这种方式下的count仅是一个普通的number数据，想要将他转换为响应式对象需要用到ref和reactive

需求：在同一个html页面中，左边有两个跳转链接负责切换组件，右边展示不同的组件，仅以切换路由为示例。路由守卫会在用户访问某个路由之前提前进行判断检查和各种操作，确保用户已符合规定的方式访问路由。此时访问路由不会返回任何东西，并触发函数。其他与history基本没有区别。当添加token后便能正常访问。

【代码】Vuex存储数据实例。

【代码】Vue简易登录注册模版(基于ElementUI)

【代码】Vue中引入ElementUI。

而跳转的路径要以router/index.js中的path为准。现在访问active路径就可以显示Active组件了。所谓路由，就是将一个个组件映射到不同的路由url中。首先要将App内的内容换成router-view。现在去注册路由，还是以上面的Active组件为例。

注：使用cookie需要下载vue-cookies。在main.js中导入。

可以将组件中共用的配置提取到一个对象内，以此便不用再每个组件中都写一遍了。

这样便是成功了以上是通过直接操作state来实现需求的，但是实际中为了安全和更好的处理数据，应该将数据由actions和mutations过滤后再与state进行交互。

package-lock.json - - - - - - - - - - 锁定依赖文件版本的文件。HelloWorld. vue - - - - - - - - - - helloworld组件。jsconfig.json - - - - - - - - - - 不管。index.js - - - - - - - - - - 路由配置文件。HomeView.vue - - - - - - - - - - 首页。index.js - - - - - - - - - - 状态管理器。

Django中接受axios请求时会遇到的问题，这是因为当你用axios发送一个请求到不同网站上（比如域名不同、端口不同），浏览器会认为这是不安全的操作，会拒绝这个请求Django中会有专门的中间件解决这个跨域问题。

es6 新增了箭头函数，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数，并且在Vue中使用箭头函数不会出现this指向不同的问题，同时还能一定程度的简化代码。在es6以后就不建议使用var变量了，let和const在语义上比var更清晰，使代码的可读性、安全性更符合现代JS的编程标准。模版字符串在需要大量字符串拼接时会比老语法。如果调用函数时不传参则会以默认参数为准。对象名与接受参数名不符时则不会被解构。es6之前的字符串拼接。

package-lock.json - - - - - - - - - - 锁定依赖文件版本的文件。HelloWorld. vue - - - - - - - - - - helloworld组件。jsconfig.json - - - - - - - - - - 不管。index.js - - - - - - - - - - 路由配置文件。HomeView.vue - - - - - - - - - - 首页。index.js - - - - - - - - - - 状态管理器。

到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )然后会在该路径下生成一个文件夹，直接用webstorm打开。这是由淘宝提供的npm镜像，以后装模块用它代替npm。如果想要保存该配置可以在这里选y然后为配置命名。可以使用默认配置，但这里我选择自行创建。完成以上配置后便可以再次在终端输入。这里使用的是vue2因此选2.x。指令，显示版本号证明安装成功。

组件可以向父组件发送自定义事件，父组件可以监听这些事件并做出相应的处理**

Vue 能够追踪计算属性的依赖关系，当依赖的数据发生变化时，相关的计算属性会自动更新。只有在依赖发生改变时，才会重新计算计算属性的值，否则会直接返回缓存的结果。es6 新增了箭头函数，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。：在实例初始化之后，数据观测和事件配置之前被调用，此时实例还未初始化完成。：实例销毁后调用，此时实例及其所有的指令被解绑，事件监听器被移除。：只处理自己的事件，父控件冒泡的事件不处理，：只处理自己的事件，子控件冒泡的事件不处理，

/ 将词库中的词过滤后赋值给keyMessage：对this.keyword数组中的每个元素使用方法，item就是每个元素。// 如果词库中的词存在于用户输入就将其返回，indexOf会判断左边元素是否存在括号元素中，并返回索引。对于有参函数来说，超出部分不计入，不足的用undefined显示，没有参数则将事件对象传入。如果原对象、数组值非空的情况下，修改对象属性是无效的，需要用语法。地绑定一个或多个属性，或一个来自父组件的 prop 里的表达式。控制元素的显示隐藏，元素存在并占据空间。

v-html会用一个HTML标签字符串，替换该元素下面的所有内容。地绑定一个或多个属性，或一个来自父组件的 prop 里的表达式。当我们使用Vue将数据和 DOM 建立关联，所有东西都是。控制元素的显示隐藏，元素存在并占据空间。，也就是当数据更新时页面也会跟着更新。该指令的意思是：“将这个元素节点的。实现表单输入和应用状态之间的双向绑定。实现表单输入和应用状态之间的双向绑定。，你会发现列表最后添加了一个新项目。会把该元素下面的所有内容替换掉。，你会发现之前显示的消息消失了。时页面的数据也会跟着改变。