• vue的内置指令、vue生命周期、自定义（过滤器、指令、插件）、非单文件组件

    内置指令

          v-text

          v-html

          ref    为特定的元素添加引用标识，实例的$refs内部可以获取到

          v-on       绑定事件   简写@

          v-bind     单向数据绑定  ：

          v-for    列表渲染

          v-if     条件渲染

          v-else    

          v-show     条件渲染

          v-model    （MVVM）

    v-text

    v-html

    ref是我们在vue当中获取真实dom元素的唯一方式 

    1. <body>
    2.   <div id="app">
    3.  
    4.      
    5.      <p ref="pp">{{msg}}p>
    6.      <p v-text="msg">p>
    7.      <p v-html="msg">p>
    8.  
    9.      <button @click="test">点击获取pbutton>
    10.  
    11.   div>
    12.   <script src="../js/vue.js">script>
    13.   <script>
    14.     new Vue({
    15.       el:'#app',
    16.       data(){
    17.         return {
    18.           msg:'i love you~'
    19.         }
    20.       },
    21.       methods: {
    22.         test(){
    23.           console.log(this.$refs.pp.innerText);
    24.         }
    25.       },
    26.     }).$mount('#app')
    27.   script>
    28. body>

     vue的生命周期

    生命周期钩子（回调函数）
        给我们机会可以干预vue的工作流程
        生命周期的执行顺序是固定的
        
        创建前  初始化数据前    数据打印看不到
        创建后    初始化数据后    数据打印可以看到

        挂载前    初始页面不显示  初始页面的元素看不到 真实dom没有
        挂载后    初始页面显示       初始页面元素可以看到


        更新前    页面更新前    实例数据是对的页面渲染的数据是错的  实例数据已经更新了，页面数据没更新
        更新后    页面更新后    实例数据是对的页面渲染的数据是对的  两个都更新了

        销毁前    实例清空前    在销毁前内部清除定时器  vm还在只是里面功能没（指令和事件）
        销毁后    实例清空后    一般不用


        使用mounted和beforeDestroy比较频繁，mounted内部我们经常去做异步操作，添加事件 定时器  ajax
        当调用了vm.$destroy(),    beforeDestroy和destroyed才会执行，beforeDestroy做收尾工作：清除定时器等
     

    1. <body>
    2.   <div id="app">
    3.     <p ref="pp">{{msg}}p>
    4.     <button @click="msg = '我爱你杨幂'">点击更新button>
    5.     <button @click="$destroy()">点击销毁button>
    6.   div>
    7.   <script src="../js/vue.js">script>
    8.   <script>
    9.     Vue.config.productionTip = false
    10.  
    11.     new Vue({
    12.       data(){
    13.         return {
    14.           msg:'我爱你赵丽颖'
    15.         }
    16.       },
    17.       // 创建阶段
    18.       // 创建前可以找到vm但是找不到vm数据
    19.       beforeCreate() {
    20.         console.log(this,this.msg);
    21.       },
    22.       created() {
    23.         console.log(this,this.msg);
    24.       },
    25.  
    26.       // 挂载阶段
    27.       // 挂载前拿不到真实dom 挂载后可以拿到
    28.       beforeMount() {
    29.         console.log(this.$refs.pp);
    30.       },
    31.  
    32.       // 挂载完成用的比较多
    33.       // 通常在这里面发请求获取动态数据，修改初始化的数据
    34.       // 在这里也通常去开启定时器
    35.       // 在这里给真实dom绑定事件
    36.       mounted() {
    37.         console.log(this.$refs.pp);
    38.       },
    39.  
    40.       // 更新阶段 （页面更新阶段）
    41.       // 任何数据更新变化，都会进入这个阶段
    42.       beforeUpdate() {
    43.         console.log(this.msg,this.$refs.pp.innerHTML);
    44.       },
    45.       updated() {
    46.         console.log(this.msg,this.$refs.pp.innerHTML);
    47.       },
    48.  
    49.       // 销毁阶段
    50.       // 销毁前用的比较多，一般都是在做善后处理
    51.       // 比如：解绑事件、清除定时器
    52.       beforeDestroy() {
    53.         console.log(this,this.msg);
    54.       },
    55.       destroyed() {
    56.         console.log(this,this.msg);
    57.         this.msg = '我爱你迪丽热巴'
    58.       },
    59.     }).$mount('#app')
    60.  
    61.   script>
    62. body>

     自定义过滤器

        过滤器
        过滤顾名思义是筛选的意思,但是在vue当中过滤器不是筛选的意思
        它是把数据进行二次加工

        定义过滤器分为全局过滤器和局部过滤器

       展示数据的时候，对数据进行处理（格式化之后再显示，不会影响原数据） 
        使用moment插件
        定义全局过滤器
            Vue.filter('过滤器名字'，回调函数)；
        定义局部过滤器
            在vm当中fliters对象当中配置

    1. <body>
    2.   <div id="app">
    3.     <p>{{timeNow}}p>
    4.     <p>{{timeNow | dateFormat}}p>
    5.     <p>{{timeNow | dateFormat('YYYY-MM-DD')}}p>
    6.     <p>{{timeNow | dateFormat('hh:mm:ss')}}p>
    7.   div>
    8.  
    9.   <div id="app1">
    10.     <p>{{timeNow}}p>
    11.     <p>{{timeNow | dateFormat}}p>
    12.     <p>{{timeNow | dateFormat('YYYY-MM-DD')}}p>
    13.     <p>{{timeNow | dateFormat('hh:mm:ss')}}p>
    14.   div>
    15.  
    16.   <script src="../js/vue.js">script>
    17.   <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js">script>
    18.   <script>
    19.  
    20.     // 全局
    21.     // Vue.filter('dateFormat', (value, format = 'YYYY-MM-DD hh:mm:ss') => {
    22.     //   return moment(value).format(format)
    23.     // })
    24.  
    25.     new Vue({
    26.       el: '#app',
    27.       data: {
    28.         timeNow: new Date().getTime()  //Date.now()
    29.       },
    30.       // 局部
    31.       filters: {
    32.         dateFormat: (value, format = 'YYYY-MM-DD hh:mm:ss') => {
    33.           return moment(value).format(format)
    34.         }
    35.       }
    36.     })
    37.  
    38.     new Vue({
    39.       el: '#app1',
    40.       data: {
    41.         timeNow: new Date().getTime()  //Date.now()
    42.       }
    43.     })
    44.  
    45.  
    46.   script>
    47. body>

     自定义指令

    定义全局指令
            Vue.directive('过滤器名字'，回调函数)；
        定义局部指令
            在vm当中directives对象当中配置

        注意：指令的名称必须是全小写，不能大写

    1. <body>
    2.   <div id="app">
    3.     <p v-text="msg">p>
    4.     <p v-upper="msg">p>
    5.   div>
    6.  
    7.   <div id="app1">
    8.     <p v-text="msg">p>
    9.     <p v-upper="msg">p>
    10.   div>
    11.  
    12.   <script src="../js/vue.js">script>
    13.   <script>
    14.     // 定义全局指令
    15.     // 指令名不带v- 并且指令名必须全小写
    16.     // Vue.directive('upper', (node, bindings) => {
    17.     //   // console.log(node,bindings);
    18.     //   // 获取到元素和元素所绑定的数据
    19.     //   // 手动给元素的内容改成大写
    20.     //   node.textContent = bindings.value.toUpperCase()
    21.     // })
    22.  
    23.     new Vue({
    24.       el: '#app',
    25.       data: {
    26.         msg: 'i love you~'
    27.       },
    28.       directives: {
    29.         upper: (node, bindings) => {
    30.           // console.log(node,bindings);
    31.           // 获取到元素和元素所绑定的数据
    32.           // 手动给元素的内容改成大写
    33.           node.textContent = bindings.value.toUpperCase()
    34.         }
    35.       }
    36.  
    37.     })
    38.  
    39.     new Vue({
    40.       el: '#app1',
    41.       data: {
    42.         msg: 'i love you~'
    43.       }
    44.     })
    45.  
    46.   script>
    47. body>

    自定义插件

        插件的作用：
            定义插件函数或者对象，为Vue和Vue的实例添加一些额外功能

        插件必须声明使用  Vue.use（）

        (function( w) {

        })( window );

        声明使用插件，所有的官方插件都要声明使用
        本质：
        如果是函数式插件就是直接调用这个函数
        如果是对象式插件，那么就找到对象的install方法去调用

    1. <body>
    2.   <div id="app">
    3.     <p v-upper="msg">p>
    4.   div>
    5.   <script src="../js/vue.js">script>
    6.   <script src="../js/myplugin.js">script>
    7.   
    8.   <script>
    9.     console.log(MyPlugin); //插件已经被放在window对象身上
    10.  
    11.     Vue.use(MyPlugin)
    12.  
    13.     Vue.myGlobalMethod()
    14.  
    15.     let vm = new Vue({
    16.       el:"#app",
    17.       data(){
    18.         return {
    19.           msg:'aaaa'
    20.         }
    21.       }
    22.     })
    23.  
    24.     vm.$myMethod()
    25.   script>
    26. body>

    自定义组件（非单文件组件）

        什么是组件： （js css html xml img 字体图标  svg 等）     代码和资源的集合叫组件
        什么是组件化： 针对项目来说  这个项目由多个组件构成 就称这个项目是组件化的项目
        什么是模块： 一个js文件（一个模块不单单可以是js文件）
        什么是模块化： 这个项目由多个模块构成 就称这个项目是模块化的项目


        vue和react都是去做单页应用的，单页应用一般肯定都是组件化的    

    1. <body>
    2.   <div id="app">
    3.     
    4.     
    5.     <mybutton>mybutton>
    6.     <mybutton>mybutton>
    7.     <mybutton>mybutton>
    8.     <mybutton>mybutton>
    9.     <mybutton>mybutton>
    10.   div>
    11.   <script src="../js/vue.js">script>
    12.   <script>
    13.     // 组件的使用就是三大步：
    14.     // 1、定义
    15.     // 定义一个组件本质是定义了一个函数，函数后期是当构造函数用的
    16.     let VueComponent = Vue.extend({
    17.       // 配置对象，这个配置对象和vue的配置对象几乎一样，除了没有el以外
    18.       data(){
    19.         // 面试题：为什么组件当中data必须是函数，不能写对象
    20.         return {
    21.           count:0
    22.         }
    23.       },
    24.       // data:{
    25.       //   count:0
    26.       // },
    27.       template:'
      我爱你赵丽颖
      '
    28.     })
    29.     // 2、注册(全局注册和局部注册)
    30.     // 注册的本质其实是把一个名字和定义生成的函数进行绑定
    31.     // 全局注册
    32.     // Vue.component('mybutton',VueComponent)
    33.     // 3、使用
    34.     // 直接写标签，标签名就是你注册的名字
    35.  
    36.     new Vue({
    37.       el:'#app',
    38.       // 局部注册组件
    39.       components:{
    40.         mybutton:VueComponent
    41.       },
    42.       data(){
    43.         return {
    44.           // count:0
    45.         }
    46.       }
    47.     })
    48.   script>
    49. body>

    简化：

    1. <body>
    2.   <div id="app">
    3.     
    4.     
    5.     <mybutton>mybutton>
    6.     <mybutton>mybutton>
    7.     <mybutton>mybutton>
    8.     <mybutton>mybutton>
    9.     <mybutton>mybutton>
    10.   div>
    11.   <script src="../js/vue.js">script>
    12.   <script src="./mybutton.js">script>
    13.   <script>
    14.     // 下面这个写法是简写
    15.     // 这里虽然不用extend生成函数，但是会把配置对象作为第二个参数，本质在函数Vue.component内部
    16.     // 还是要先用extend把第二个参数作为配置对象生成函数的，再用生成的函数和第一个参数进行绑定
    17.     // 全局定义并注册
    18.     // Vue.component('mybutton',{
    19.     //   // 配置对象，这个配置对象和vue的配置对象几乎一样，除了没有el以外
    20.     //   data(){
    21.     //     return {
    22.     //       count:0
    23.     //     }
    24.     //   },
    25.     //   // data:{
    26.     //   //   count:0
    27.     //   // },
    28.     //   template:'
      我爱你赵丽颖
      '
    29.     // })
    30.  
    31.     // Vue.component('mybutton',mybutton)
    32.  
    33.     // 3、使用
    34.     // 直接写标签，标签名就是你注册的名字
    35.     new Vue({
    36.       el: '#app',
    37.       // 局部定义并注册组件
    38.       components: {
    39.         mybutton
    40.       },
    41.       data() {
    42.         return {
    43.           // count:0
    44.         }
    45.       }
    46.     })
    47.   script>
    48. body>

    mybutton.js

    1. (function(w){
    2.   w.mybutton = {
    3.     // 配置对象，这个配置对象和vue的配置对象几乎一样，除了没有el以外
    4.     data(){
    5.       return {
    6.         count:0
    7.       }
    8.     },
    9.     // data:{
    10.     //   count:0
    11.     // },
    12.     template:'
      我爱你赵丽颖
      '
    13.   }
    14. })(window);

        缺点：
            这样定义组件麻烦、模板没提示
            样式没法单独搞，
            没法使用模块化解析ES6语法

        后期我们都是约定成俗（习惯性）把一个.vue文件称作是一个组件，但是本质上它只是暴露了一个配置对象
        配置对象必须在Vue.component()之后，才能定义并注册成为一个组件，接着才能写标签使用

    为什么组件当中data必须是函数，不能写对象 

     如果写对象，由于配置对象是同一个，如果组件复用，实例化出来的组件对象里的数据用的是同一个data，

    使用函数，每个组件都有自己的数据，每次实例化一个对象，都会调一次函数，调用函数时，会return一个新的对象

  • 相关阅读:
    Python3.7源码编译
    POJ1330最近公共祖先LCA
    直播课堂系统08-腾讯云对象存储和课程分类管理
    CSS accent-color + 自己封装 radio
    【开源】基于JAVA的社区买菜系统
    python-数据可视化(总)
    Windows库程序
    哈希算法（二）哈希算法与一致性哈希算法
    ssh 免密码登录
    Spring Cloud Loadbalancer
  • 原文地址：https://blog.csdn.net/m0_60376759/article/details/125898075