Vue框架基础3

1.过滤器

(1).过滤器（Filters)是vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方： 差值表达式和 v-bind 属性绑定。

(2).过滤器应该被添加在JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：

//在双花括号中通过“管道符”调用 capiitaliize 过滤器,对message 的值进行格式化
<p>{{ message | capitalize }}</p>

//在 v-bind 中通过 “管道符” 调用 formatid 过滤器，对 rawid 的值进行格式化
<div v-bind:id="rawid | formatId"></div>

2.侦听器

watch 侦听器允许开发者监视数据变化，从而针对数据的变化做特定的操作。

2.1方法格式的侦听器

• 缺点一：无法在刚进入页面触发，自动触发！！！
• 缺点二：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！

语法格式如下：

  const vm= new Vue({
            el:'#app',
            data: {//数组对象
                content:''
            },
           //所有的侦听器都应该被定义到watch节点下
           watch: {
            //    监听器本质上是一个函数，监听数据的变化，监听谁就把谁作为方法名
            //    newVal 是变化后的监听到的新值，oldVal 是监听前的旧值
            content(newVal,oldVal){
                console.log('监听content值得变化',newVal,oldVal);
            } , 

2.2对象格式的侦听器

• 好处一：可以通过 immediate 选项。让侦听器自动触发！！！
• 好处二：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

  const vm= new Vue({
            el:'#app',
            data: {//数组对象
                add:'admin'
            },
            watch: {//监听器
                //对象格式的侦听器
                add: {
                    //侦听器的处理函数
                    handler(newVal,lodVal){
                        console.log(newVal,lodVal);
                    },
                    //true立即触发 
                immediate:true
                }
            } 

计算属性

1.计算属性指的是通过一系列运算之后，最终得到一个属性值。

2.这个动态计算出来的属性值可以被模板结构 methods 方法使用。

3.计算属性是在选项对象中使用 computed 字段来定义。

4.计算属性是可被缓存的（计算属性是基于它的响应式依赖进行缓存的，只有当依赖项发生变化时，才会重新计算并缓存）。

5.计算属性和方法得区别：

• 计算属性有缓存，方法没有缓存，对于同一个事件，计算属性缓存后只调用一次，方法调用几次则执行几次
• 方法中可包含如网络请求类似的副作用操作，计算属性中没有
  示例代码如下：

<div id="app">
    <div>{{total}}</div>
    /*3*/
</div>
<script src="../libs/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num1:1,
            num2:2
        },
        computed:{
            //total() {
            //    return this.num1+this.num2
            //},
            //注释内容未下面内容简写形式
            
            total(){
            	get() { // getter，用于获取属性值，比如：console.log(this.reversedMsg)
	            console.log('计算 total...')
	             return this.num1+this.num2
	          },
	          set(val) { // setter，用于设置（修改）属性值
	            console.log('赋值:', val)
	          },
	        }
            
        },
</script>

数组变更

变更方法

push() / pop()
unshift() / shift()
splice()
sort() / reverse()
vue 对这七个方法进行了重写，当调用这些方法进行数组修改时，会触发响应式渲染

替换数组

• 当调用非变更方法时，不会触发响应式渲染，则可以使用替换数组的方式来进行数组更新
• 当数组长度改为0时，不会触发响应式渲染

组件化应用构建

• 组件，即构建应用程序所使用到的部件
• 组件系统，允许我们使用小型、独立和通常可复用的组件构建大型应用
• 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
  代码示例：

定义组件选项
const options = {
  template: '模板-视图的结构(布局)',
  data() {
    return {}
  },
}

注意：

• template 中定义的结构，必须使用单个根元素包裹
• data 必须是函数结构，在函数体内部返回一个普通对象
  为什么 data 要是函数？
• 组件是可被复用的，当创建同一个组件的不同实例时，如果 data 是普通对象，则不同的实例引用到的是同一个 data 对象，当任意一个实例中对 data 数据进行更新时，其它实例都会受影响，通常这与实际业务不符
• 定义成函数，则创建各组件实例时，会调用 data 函数生成组件实例自身私有用到的对象数据，各组件实例间数据是独立的，互不受影响

注册组件

1.全局注册

1| Vue.component(name, options)

1| 全局注册的组件可在任意组件中使用到

2.局部注册

const options = {
  components: {
    name: componentOptions
  }
}

1| 局部注册的组件仅在其父组件内部可使用

3.渲染组件
4.利用组件名称作为自定义标签名称使用，来渲染组件。
5.在使用自定义组件名作为标签名称使用时，要完整书写独立的结束标签，标签名称应该使用短横线命名的规范