Vue入门2——MVVM、组件化、生命周期、样式绑定、TodoList

吃了一天糖葫芦
154 阅读2分钟

image.png image.png

Vue

MVVM设计模式

传统MVP设计模式

image.png 控制器P层是核心，其中很大一部分都是在做DOM操作

MVVM设计模式

image.png MVVM 主要写哪两个层的代码？

  • M层：数据
  • V层视图层：模板标签 VM是VUE来实现的不用自己实现。

前端组件化

image.png 在全局注册组件的时候用驼峰写法TodoItem，在使用标签的时候用todo-item是OK的。

image.png

Vue的必须知道的概念和定义

Vue实例的生命周期 钩子

生命周期函数就是vue实例在某一个时间点会自动执行的函数。生命周期函数并没有放在实例的methods里，直接放到实例里就可以了。

  • beforeCreate：数据未初始化前执行。项目初始化的时候自动调用该函数。打开网页就有了。
  • created：数据和方法已初始化
  • beforeMount：模板已经在内存中编译完成但是尚未渲染到页面上。模板和数据相结合的DOM元素即将挂载到页面的一瞬间之前的时间点上
  • mounted：页面已渲染。页面挂载之后
  • beforeUpdate 数据已经被更新，但是页面没被更新
  • Updated 页面和 data 都已更新
  • beforeDestroy Vue 实例销毁之前执行
  • destroyed 实例销毁执行 image.png Z6N6~Q92%U%8TFIL(E{P}(O.png

Vue的模板语法

  • 插值表达式 {{}} 根据里面内容去data里找，找不到就会去计算属性里找。和v-text效用差不多的，不会出样式，会转义出标签名。
  • 当看到一个VUE指令后跟一个值的时候，这个值不是字符串，而是一个JS表达式。v-text="name" v-html="name"区别在于是否转义。
  • 以上三个等号右边都可以写表达式，比如字符串拼接。

计算属性的setter和getter

  • 当{{fullName}}去读计算属性的内容的时候，就会去走get的方法。set会接收外部输入的value，当设置fullName值的时候，就会执行set。 image.png

Vue中的样式绑定 数据和样式如何进行绑定？

法一 class的对象绑定方法

  • 借助class和一个对象的形式实现样式的绑定： 
    <style>
    .activated {
        color: red
    }
</style>

    <body>
    <div id="app">
        <div @click="handleDivClick"
            :class="{activated: isActivated}"✨✨✨
        >Hello World</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false✨✨✨
            },
            methods: {
                handleDivClick(){
                    this.isActivated = !this.isActivated;✨✨✨
                }
            }
        })
    </script>
</body>
    :class="{activated: isActivated}"类名是activated，isActivated是data里的变量。activate类名的显示与否，取决于isActivated是true还是false。

法二 class的数组绑定方法

  • 借助class和数组的绑定： 
    <body>
    <div id="app">
        <div @click="handleDivClick"
            :class="[activated]"✨✨✨
        >Hello World</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activated: ""✨✨✨
            },
            methods: {
                handleDivClick(){
                    this.activated = this.activated === "activated"?
                    "":"activated";✨✨✨
                }
            }
        })
    </script>
</body>

法三 绑定style 内联

  • 通过对象的方式

     <body>
    <div id="app">
        <div @click="handleDivClick"
            :style="styleObj"✨✨✨
        >Hello World</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj:{✨✨✨
                    color:"black"
                }
            },
            methods: {
                handleDivClick(){
                    this.styleObj.color = this.styleObj.color === "black"?"red":"black";✨✨✨
                }
            }
        })
    </script>
</body>

  • 通过数组的方式，[styleObj,{fontSize:'20px'}]

Vue中的条件渲染与列表渲染

juejin.cn/post/702893…

Vue实现功能

hello world经过两秒变成bye world

  • image.png
  • app指Vue的实例，$data就是data的别名

Vue实现功能一个TodoList

父子组件之间如何传值？单文件组件的写法与注册？ image.png

  • main.js入口 
    import Vue from 'vue'
import TodoList from './TodoList'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { TodoList },
  template: '<TodoList/>' 

})
  • TodoList根组件 
    <template>
  <div>
    <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <todo-item 
        v-for="(item, index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
      ></todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue'
export default {
  //作为一个组件 数据应该变成一个函数 函数的返回值是具体的数据
  components:{
    'todo-item':TodoItem   //把局部组件注册到根组件之中
  },
  data (){
    return {
      inputValue:'',
      list:[]
    }
  },
  methods: {
    handleSubmit (){
      this.list.push(this.inputValue)//是this.$data.list的缩写，用this的时候 vue会自动去data里找找不到就会去computed里找
      this.inputValue=''
    },
    handleDelete(index){
      this.list.splice(index,1)
    }
  }
}
</script>
<style>
</style>
  • ToodoItem单文件组件 
    <template>
    <li @click="handleDelete">{{index}}{{content}}</li>
</template>
<script>
export default {
    props: ['content','index'],
    methods: {
        handleDelete(){
            this.$emit("delete",this.index)
        }
    }
}
</script>
<style scoped>
</style>
avatar
文章
阅读
粉丝