vue知识点复习

1-vue是什么
构建用户界面的渐进式框架
渐进式-当前已有的项目可以使用它，也可以完全创建新项目使用它
2-模板语法

<span> Message:{{name}}</span>

配合js中data()设置数据

export default {
    name: "School",
    data() {
        return {
            name: '商学'
        }
    }

原始html

<div>{{rawHtml}}<div><!--解析出来是<a href='http://www.baidu.com'>百度</a>  -->
<div v-html="rawHtml"><div><!--解析出来是 百度-->

export default {
    name: "School",
    data() {
        return {
            name: '商学'，
            rawHtml：'<a href='http://www.baidu.com'>百度</a>'
        }
    }

v-bind属性

<div v-bind:id="dyname"><div><!--控制台显示<div v-bind:id="10001"><div>  -->
简写形式
<div :id="dyname"><div>

export default {
    name: "School",
    data() {
        return {
           dyname:10001
        }
    }

3-条件渲染
v-show和v-if的区别
v-if有更高的切换开销(条件很少改变)，v-show有更高的初始渲染开销(频繁切换)
4-列表渲染

<ul>
  <li v-for="(item,index) in newList :key="item.id">
    {{item.title}}
  </li>
</ul>

export default {
    name: "School",
    data() {
        return {
         newList:[
         {
         id：001，
         title：'你好'
         },
         ]
        }
    }

5-事件处理
v-on监听事件v-on:click=“counter++”
6-表单输入绑定
7-组件基础
8-Props
1-组件和组件之间是需要存在交互的
2-Props能决定组件与组件之间的数据传递
3-实现将数据从父组件传递到子组件
9-自定义事件组件交互
1-实现将数据从子组件传递到父组件
10-组件的生命周期
vm的生命周期
将要创建===>调用beforecreat函数
创建完毕===>调用created函数
将要挂载/渲染===>调用beforeMount函数
挂载/渲染完毕===>调用mounted函数
将要更新===>调用beforeUpdate函数
更新完毕===>调用updated函数
将要销毁===>调用beforeDestroy函数
销毁完毕===>调用destroyed函数