vue随笔

一.Vue基本语法

1.官方模板语法文档地址：https://v3.vuejs.org/guide/template-syntax.html#interpolations

 2.常用语法

  • {{msg}}:文本插值     
<p>{{msg1}}</p>
export default {
    data:function(){
        return{
            msg1:'展示文本',
        }
    }
}
  • v-html:输出真实的HTML
<p v-html="msg2"></p>
export default {
    data:function(){
        return{
            msg2:'<span class="r">html直接显示</span>',
        }
    }
}
  • v-if将<p>根据表达式值的真实性删除/插入元素seen。
<p v-if="isShow">你能看到我吗？</p>
export default {
    data:function(){
        return{
            isShow:true,
        }
    }
}
  • v-show有条件显示元素
  • v-if与v-show的区别:
  1. v-show将始终呈现并保留在DOM中；v-show仅切换display元素的CSS属性。
  2. v-if是真实的条件渲染，因为它确保条件块内的事件侦听器和子组件在触发期间正确销毁并重写创建。
  3. v-if切换成本较高，而v-show初始化渲染成本较高。因此v-show如果您需要经常切换某些内容，则首选，v-if如果条件不可能在运行时更改，则首选。
  • 参数 v-bind
  1. 用于响应式地更新HTML attribute
  2. ":"是指令 "v-bind"的缩写
  3. 在这里href是参数，告知v-bind指令将该元素的href attribute与表达式url的值绑定。

　　<a v-bind:href="url">...</a>

  • v-on
  1. "@"是指令"v-on"的缩写;  监听DOM事件
  2. "."是修饰符:指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
  • v-model  在组件上使用v模型

　　在组件上使用时，

　　自定义事件还可以用于创建与一起使用的自定义输入v-model

  • v-for
  1. 2.2.0+的版本里，当在组件上使用v-for时，key现在是必须的。
  2. 然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用

<my-component

　　v-for="(item, index) in items"

　　v-bind:item="item"

　　v-bind:index="index"

　　v-bind:key="item.id" >

</my-component>

　　3.不自动将item注入到组件的原因是，这会使得组件与v-for的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

  • vue的src/router/views/App的关系
  • router->index :理解:就是指路由的配置。  import导入需要配置的界面组件，通过router输入，通过某一菜单列把router循环渲染，点击不同菜单router切换不同组件。动态渲染一个页面级组件。
  • App.vue : router-link   链接，注意不支持target="blank",如果你想打开一个新标签页，你必须用<a>标签。
  • App.vue : router-view 指向，解释：在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。点击之后，怎么做到正确的对应，就要在js文件中配置router-view路由。
  • views是页面级组件   
  • components是小组件  可以被引用在views中
  • containers是容器级组件 （根据项目大小决定是否使用）
  • 引用关系是：assets->components->views->router->App.vue->main.js

 

  • 实例生命周期钩子

　　　　每个Vue实例在被创建时都要经过一系列的初始化过程--例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。

  1. beforeCreate----->在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用
  2. created----->钩子可以用来在一个实例被创建之后执行代码
  3. beforeMount----->在挂载开始之前被调用：相关的render函数首次被调用。 该钩子在服务器端渲染期间不被调用
  4. mounted----->实例被挂载后调用
  5. beforeUpdate----->数据更新时调用，发生在虚拟DOM打补丁zhiq.这里适合在更新之前访问现有的DOM，比如手动移出已添加的事件监听器。 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
  6. updated----->由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
  7. activated----->被keep-alive缓存的组件激活时调用。  该钩子在服务器端渲染期间不被调用。
  8. deactivated----->被keep-alive缓存的组件停用时调用。
  9. beforeDestroy-----> 实例销毁之前调用。在这一步，实例仍然完全可用。   该钩子在服务器端渲染期间不被调用
  10. destroyed----->实例销毁后调用。该钩子被调用后，对应Vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。  该钩子在服务器端渲染期间不被调用。

 

 二、创建vue项目

  1. D盘右键选择在此处打开窗口，打开PowerShell
  2. 创建输入命令：vue create vdemo 回车

 

 

 

 

 

 打包发送的时候会删掉 node_modules，因为它的拷贝很慢

文件重新加载，需要在cmd执行命令：npm install

启动项目 npm run serve

几个常见概念

  •  export导出模块接口
  • import导入模块
  • as 关键字  就是起别名，在外部只认别名
  • require 懒加载也叫延迟加载，即在需要的时候进行加载，随用随加载。懒加载实现异步加载，可以将页面划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力。
  • components 包含Vue实例可用组件的哈希表。
posted @ 2021-02-07 21:39  zhouhl  阅读(61)  评论(0)    收藏  举报