Vue基础知识1

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

---

一、基础语法

1.插值表达式

插值表达式用{{ }}来表示，{{ }} 中除了可以填变量，也可以填入单个表达式

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age >=18 ? '成年' : '未成年' }}</h3>
    <a v-bind:href='url'>跳转</a>
  </div>
</template>
<script>
export default { 
  data() {   
    return {
      msg: 'hello,vue',
      obj:{      
     	 name:'vue',
      	 age: 5,
      },
      url: 'http://www.baidu.com'
    };
  },
};
</script>

可以看到在代码中我们还使用了v-bind，v-bind用来单向绑定数据，可以简写为冒号（:），v-bind会在渲染的 DOM 上应用特殊的响应式行为。

2.双向绑定数据 v-model

v-modle绑定数据是双向的，表单输入的数据能影响定义的变量，而v-bind绑定数据是单向的，在表单输入中修改数据，无法对其余变量产生影响

<template>
  <div>
    <span>v-model：</span><input type="text" v-model="searchMap.keyWord">
    <p>您输入的是：{{ searchMap.keyWord }}</p>
    <span>v-bind：</span><input type="text" v-bind:value="searchMap.keyWord">
  </div>
</template>
<script>
export default { 
  data() {   // 1.变量在data函数return的对象上
    return {
      searchMap: {keyWord: '暂无输入'}
    }
  }, 
}; 
</script>

3.v-if与v-show

v-if与v-show都可以用来隐藏标签，使用方法：

<h1 v-show="boolean">1</h1>
<h2 v-if="boolean">2</h2>

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4.v-for列表循环

v-for可以绑定一个数组的数据来渲染一个项目列表
最简单的用法如下：

<template>
  <div>
    <span v-for="n in 10" :key="n">{{n}}</span>
  </div>
</template>
<script>
export default {}
</script>

输出结果就是：“ 12345678910 ”

还可以在data中传入数组，循环数组，输出内容：

<template>
  <div>
    <li v-for="item in list" :key="item.id">{{item.name}}</li>
  </div>
</template>
<script>
export default {
  data(){
    return{
      list:[{
        id:1,
        name:'lilei'
      },{
        id:2,
        name:'hanmei'
      }]
    }
  }
}
</script>

注意，在这里v-for后面使用了key属性，key是虚拟dom对象的唯一标识。
使用v-for时必须加上key，key的值可以是数组索引index，最好是数组对象中一个特定的值，如上面代码中的id。
当v-for循环时，先根据数据生成虚拟dom，再根据虚拟dom生成真实dom。当数据发生变化时，会生成新的虚拟dom。
然后vue会将新的虚拟dom和初始虚拟dom进行对比，即：diff算法（diff算法详解）。

5.事件绑定v-on

以点击事件为例，在原生dom中的点击事件需要使用使用事件监听器addEventListener，非常的麻烦。
在vue中绑定点击事件方法如下：

<template>
  <div>
    <p>总计：{{count}}</p>
    <Button v-on:click="count++">+1</Button>
    <Button v-on:click="addFn">+1</Button>
    <Button @click="addFn">+1</Button>
  </div>
</template>
<script>
export default { 
  data() {   
    return {
      count: 1,
    };
  },
  methods: {
    addFn(){
      this.count++
    }
  }
}; 
</script>

6.动态class与动态style

<template>
  <div>
    <!-- 给标签class属性动态赋值
    :class="{ 类名:boolean }"    
    -->
    <p :class="{ red_str:bool }">动态class</p>
    <!-- 动态style  
    :style="{ css属性名:值 }" -->
    <p :style="{ backgroundColor:'red' }">动态style1</p>
    <p :style="{ backgroundColor:colorSt }">动态style2</p>
  </div>
</template>
<script>
export default {
  data(){
    return{
      bool:true,
      colorSt:'blue',
    }
  }
}
</script>
<style>
  .red_str{
    color:red;
  }
</style>

---