Vue2学习（2）过滤器+侦听器+vue-cli

最新推荐文章于 2022-08-15 14:26:26 发布

GDUF-LZ

最新推荐文章于 2022-08-15 14:26:26 发布

阅读量663

点赞数

分类专栏： Vue2学习文章标签： vue.js 学习

本文链接：https://blog.csdn.net/weixin_47758346/article/details/123521569

版权

Vue2学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。’|'为“管道符”。

<body>
    <div id="app">
        <p>message的值是：{{ message | change}}</p>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
               message: 'hello!'
            },
            filters:{
                //过滤器函数形参中的val,永远都是管道符前面那个值
                change(val){
                    return 'hi'
                }
            }
        })
    </script>
</body>

私有过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
全局过滤器

独立于每个vue实例之外，语法格式：Vue.filter(“过滤器名字”，“过滤器处理函数”)
```
Vue.filter('change', function (str) {
      const first = str.charAt(0).toUpperCase()
      const other = str.slice(1)
      return first + other
    })
```
- 要定义到 filters 节点下，本质是一个函数
- 在过滤器函数中，一定要有 return 值
- 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
- 如果全局过滤器和私有过滤器名字一致，按照“就近原则”，调用的是”私有过滤器“
连续调用多个过滤器，逐步传递；过滤器可以接受函数，参数一一对应

侦听器

侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可

方法格式的侦听器

<div id="app">
        <input type="text" v-model="username">
      </div>
    
      <script src="./lib/vue-2.6.12.js"></script>
      <script src="./lib/jquery-v3.6.0.js"></script>
    
      <script>
        const vm = new Vue({
          el: '#app',
          data: {
            username: 'admin'
          },
          // 所有的侦听器，都应该被定义到 watch 节点下
          watch: {
            // 新值在前，旧值在后
            username(newVal,oldVal) {
             console.log(newVal,oldVal)
            }
          }
        })
      </script>
//无法在刚进入页面时自动触发，如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器

2.对象格式的侦听器（监听谁谁作为属性）

<div id="app">
    <input type="text" v-model="username">
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script src="./lib/jquery-v3.6.0.js"></script>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      watch: {
        // 定义对象格式的侦听器
        username: {
          // 侦听器的处理函数
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          },
          // immediate 选项的默认值是 false
          // immediate 的作用是：控制侦听器是否自动触发一次！
          immediate: true
            
          //让侦听器深度监听对象中每个属性的变化
          deep:true
        }
      }
    })
  </script>

vue-cli

vue-cli是Vue.js进行快速开发的标准工具，可自动生成Vue.js+webpack的项目模板。

vue-cli的安装

cmd中输入：npm install -g @vue/cli

进入一个文件夹，在该路径下的终端cmd下运行如下的命令，创建指定名称的项目：
```
vue cerate 项目的名称
```
preset预设，default默认，Manusually select features手动配置

（在原有的项目配置vue环境：cnpm i; 项目文件夹多一个node_modules文件夹）

vue 项目中 src 目录的构成：

assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
App.vue 是项目的根组件。（后面例子会用到）

vue 项目的运行流程

vue 的工作流程：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

（1） App.vue 用来编写待渲染的模板结构

（2）index.html 中需要预留一个 el 区域

（3） main.js 把 App.vue 渲染到了 index.html 所预留的区域中

（4）.$mount()方法指定渲染区域，跟el属性作用相同

//main.js文件

//导入vue包，得到vue构造函数
import Vue from 'vue'

//导入vue根组件，把APP.vue中的模板结构，渲染到html页面中
import App from './App.vue'

Vue.config.productionTip = false


//创建vue实例
//将APP.vue渲染到HTML页面中的预留区域即<div id="app"></div>中
new Vue({
  render: h => h(App),
}).$mount('#app')

在cmd输入npm run serve即可运行，也可以在Vscode下方的终端运行
!!!如果出现如下错误

Syntax Error: TypeError: Cannot read properties of undefined (reading ‘parseComponent’)

（根本问题是vue版本跟vue-template-compiler版本不同）

（网络上找到的可行解决办法）：
在package.json中将vue-template-compiler以及vue的版本都改成2.6.11–>删除package-lock.json–>删除node_modules文件夹–>重新npm install即可解决问题