Vue基础

基本用法

// 使用vue工作必须创建一个vue实例，且要传入配置对象
// root容器的代码必须符合html规范，混入vue语法
// root容器里的代码被称为vue模板
<div id="#app">Hello {{user}}  {{ 1>0?"真":"假" }}</div>
<script>
    //赋值vm可以省略
    const vm = new Vue({  
        el:"#app" //选择服务的容器
        data:{ // 用于存储数据 ---> 供el选择的容器使用
            user:"Vue"
        }
    })    
</script>

注意事项

• el 对于clss时,vue只解析第一个
• 只能一个vue实例只能对应一个容器 反:一样，取第一
• 一般只有一个主vue实例和一个容器
• 主vue实例可以有多个子类（组件）
• {{ }}语法中能执行js表达式 —- 插值语法

  对应简写

  | 原始 | 简化 | 实例 | | —- | —- | —- | | v-bind: | : | :href = “val” | | v-model:value | v-model: | v-mode:value = “data” | | v-on:click | @click | @click=’click’ |

数据绑定

• v-bind是单向绑定 v-model是双向绑定
• v-model只能使用在输入类元素 —- >表单元素 value值

  MVVM模型

1. Vue的mvvm模型没有完全遵行mvvm模型
2. M:模型(Model) 对应data中的数据
3. V: 视图(VIEW): 模板
4. VM: 视图模型(ViewModel) Vue实例对象
5. VM处理dom数据绑定与dom监听

   Object.defineproperty

   ```javascript let jsn = { name:”韩”, age:19 } Object.defineProperty(jsn,”sex”,{ value:”男”, enumerable:true //控制属性是否可以枚举 默认false writable:true //控制属性是否能被修改 默认false configurable:true //控制属性是否可以被删除 默认false 当有人读取person的sex属性时,get函数会被调用,且返回值是age的值 get:function(){

    retrun "hello"

   }, set:function(e){ num = e console.log(e) console.log(“修改成功”) } }) // 添加的属性默认不能参与遍历 不能枚举 不能修改 不能删除

<a name="axMy2"></a>
## 事件处理
- v-on:click = "clickfun" 默认传参event
- v-on:click = "clickfun($event)" 需要手动传参
<a name="eYDAd"></a>
## 阻止默认行为
```javascript
//vue阻止默认行为
<a href="http://baidu.com" @click.prevent = "cliskfunc">点我提示信息</a>
//js阻止默认行为
function(event){
    e.preventdefined()
}