vue(1)

92 阅读1分钟

什么是mvvm?

  • m model 模型当前视图中可用的数据

  • view 视图 页面dom html

  • (c controller 控制器 处理,加工model)

  • vm viewModel 监控者 数据的处理及渲染

vue的核心是什么: 数据驱动 组件

双向数据绑定

  • v-model 表单、输入框的value值
<template>
  <div>
    <h3>复选框</h3>
    <div>
      <input type="checkbox" v-model="checkArr" value="1">1
      <input type="checkbox" v-model="checkArr" value="2">2
      <input type="checkbox" v-model="checkArr" value="3">3
      <span>{{checkArr}}</span>
    </div>
    <h3>单选框</h3>
    <div>
      <input type="radio" v-model="radio" value="1">1
      <input type="radio" v-model="radio" value="2">2
      <input type="radio" v-model="radio" value="3">3
      <span>{{radio}}</span>
    </div>
    <h3>下拉框</h3>
    <div>
      <select v-model="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <span>{{select}}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data () {
    return {
      checkArr: [1,2],
      radio: [],
      select: [],
  }
}
</script>
  • Object.defineProperty() 动态添加属性

基本运用

var obj = {};
<!--单个-->
Object.defineProperty(obj,'name',{
    value: 'abc',
    writable: false // 为true是可以修改 当前属性值是否能修改
})
<!--修改多个-->
Object.defineProperties(obj,{
    'name': {
        value: 'abc',
        writable: false
    },
    'age': {
        value: '11',
        writable: true
    }
})
var obj = {};
var a = 123;
Object.defineProperty(obj,'name',{
    get: function(){
        return a;
    },
    set: function(){
        a = val
    }
})
console.log(obj.name) // 触发get
obj.name = abc;//触发set

一些使用小技巧

  • v-cloak 解决{{}}浏览器闪烁的问题。使用时必须配置css样式,否则不生效。
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>
    <div v-cloak>{{msg}}</div>
</dody>
  • event表示事件的状态、鼠标的位置,按钮的状态。。。
<!--传参写法-->
<button @click="change($enevt)"></button>