Vue2.0 浅学笔记

标签：vue return default 浅学笔记 export 组件 data Vue2.0

Vue 是框架，也是生态。

1.Vue API风格

选项式（Vue2）

组合式(Vue3)

2.入门

node.js 版本大于15

3.创建项目

创建项目

npm init vue@latest

开发环境

VScode +Volar

4.基本语法

1.文本插值

仅能使用单一表达式

使用JavaScript表达式
每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript 代码。一个简单的判断方法是是否可以合法地写在秋天后面

<template>
<h3>模板语法</h3>
<p>{{msg}}</p>
<p>{{number+1}}</p>
<p>{{ok ? "yes" :'no'}}</p>
<p>{{messge.split('').reverse().join()}}</p>
</template>
<script>
    
export default {
  data() {
      return {
        'msg':'123木头人',
        'number':10,
        'ok': true,
        'messge':'大家好'
      }
  }
}

</script>

2.渲染原始html

双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用 html 指令

<template>
<h3>模板语法</h3>
<p v-html="rowhtml"></p>
</template>


<script>

export default {
  data() {
      return {
        'rowhtml':'<a href="www.baidu.com">阿辉啊</a>'
      }
  }
}

</script>

3.属性绑定

v-bind 指令指示 Vue 将元素的 d attribute 与组件的 dynamid 属性保持一致。如果绑定的值是 nul 或者undefined ，那么该 attribute 将会从染的元素上移除

<template>
    <div v-bind:id="ids" v-bind:class="msg">test</div>
</template>


<script>
  export default {
    data(){
      return{
        'msg':"active",
        'ids':"appClass"
      }
    }
  }
</script>

<style>
.appClass{
  color: aqua;
}
</style>

简写
因为 v-bind 非常常用，我们提供了特定的简写语法

<div :id="dynamicId”:class="dynamicclass"></div>

布尔

 <button :disabled="a">Button</button>
 
 
 <script>
  export default {
    data(){
      return{
        'msg':"active",
        'ids':"appClass",
        'a':true
      }
    }
  }
</script>

对象

<div :class="obj.name"></div>

<script>
  export default {
    data(){
      return{
        'msg':"active",
        'ids':"appClass",
        'a':true,
        'obj':{
          'name':'xiaohui'
        }
      }
    }
  }
</script>

多值绑定

<div v-bind="obj">9999</div>

<script>
  export default {
    data(){
      return{
        'msg':"active",
        'ids':"appClass",
        'a':true,
        'obj':{
          'name':'xiaohui'
        },
        'url':'www.baidu.com'
      }
    }
  }
</script>

4.条件渲染

v-if

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">你能看见我吗</div>
</template>


<script>
  export default {
    data(){
      return{
        'flag':false
      }
    }
  }
</script>

v-else

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">你能看见我吗</div>
    <div v-else>那你看看我</div>
</template>


<script>
  export default {
    data(){
      return{
        'flag': true
      }
    }
  }
</script>

v-else-if

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">你能看见我吗</div>
    <div v-else>那你看看我</div>
    <div v-if="type=='A'">A</div>
    <div v-else-if="type==B">B</div>
    <div v-else>C</div>

</template>


<script>
  export default {
    data(){
      return{
        'flag': true,
        'type':'A'
      }
    }
  }
</script>

v-show

<template>
    <h3>条件渲染</h3>
    <div v-show="flag">v-show</div>
</template>


<script>
  export default {
    data(){
      return{
        'flag': true,
        'type':'A'
      }
    }
  }
</script>

v-if VS v-show

v 是“真实的“按条件染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
v 也是惰性的: 如果在初次染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被染，只有 CSS dsplay 属性会被切换,总的来说，v-if有更高的切换开销，而 show 有更高的初始染开销。

因此，如果需要频繁切换，则使用show 较好;如果在运行时绑定条件很少改变，则 v-if会更合适

5.列表渲染

我们可以使用 v-for 指令基于一个数组来染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法其中 items 是源数据的数组，而 item 是选代项的别名

<template>
    <h3>列表渲染</h3>
    <p v-for="i in names">{{i}}</p>

    <div v-for="i in res">
        <p>{{i.title}}</p>
        <img :src="i.id" alt="1233444">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                'names':[123,456,789],
                'res':[
                    {'id':'https://pic.rmb.bdstatic.com/bjh/down/96114dba7e6715f344fb6d39225d6ad5.jpeg',"title":"title111"},
                    {'id':2,'title':"title22"}
                ]
            }
        }
    }
</script>

    <p  v-for="i of names">{{i}}</p>

<template>
    <h3>列表渲染</h3>
    <p v-for="i in names">{{i}}</p>

    <div v-for="i in res">
        <p>{{i.title}}</p>
        <img :src="i.id" alt="1233444">
    </div>
    <p>index 渲染</p>
    <div v-for="(i,index) in names">
        <p>{{index}}</p>
    </div>
    <p>i of names</p>
    <p  v-for="i of names">{{i}}</p>
    <p>遍历对象所有属性</p>
    <p v-for="(value,key,index) of res">{{ value.title }}--{{key}}--{{index}}</p>
</template>

<script>
    export default {
        data() {
            return {
                'names':[123,456,789],
                'res':[
                    {'id':'https://pic.rmb.bdstatic.com/bjh/down/96114dba7e6715f344fb6d39225d6ad5.jpeg',"title":"title111"},
                    {'id':2,'title':"title22"}
                ]
            }
        }
    }
</script>

6.通过key值管理状态

Vue 默认按照“就地更新”的策略来更新通过 4o 染的元素列表当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素你需要为每个元素对应的块提供一个唯一的 key attribute:

<template>
    <h3>Key 属性</h3>
    <p v-for="(i,index) in names" :key="index">{{i}}</p>
</template>

<script>
    export default{
        data(){
            return {
                names:[12,343454,5464]
            }

        }
    }
</script>

温馨提示
key 在这里是一个通过 v-bind 绑定的特殊 attribute推荐在任何可行的时候为 v-for 提供一个 key attribute绑定的值期望是一个基础类型的值，例如字符串或 number 类型key

7.事件处理

我们可以使用 v-on 指令(简写为 @)来监听 DOM 事件，并在事件触发时执行对应的JavaScript。用法

标签：vue,return,default,浅学,笔记,export,组件,data,Vue2.0
From： https://www.cnblogs.com/z-x-h/p/17732166.html