vue2.0-start01

发表于 | 阅读次数:
字数统计: 369 | 阅读时长 ≈ 1

不够系统的学习 vue 趁着有些闲暇的时间 对此进行整理一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<div id="app">
  <input type="text" placeholder="请输入" v-model="message" />
  <br />
  
  <p>data: {{ message }}</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () { 
  //vm实例
    var vm = new Vue({
      el: '#app',  //挂载元素
      data: {
        message: "hello, Data"
      }
    });
  },false);

</script>


</html>

vue的特色 数据双向绑定 数据模型model与视图view组件的自动同步

el: 挂载元素选择器
data: 代理数据
method: 定义方法

声明式渲染

声明式 只需要声明在哪里做什么 无需关心如何实现

命令式 需要具体代码表达在哪里 做什么 如何实现

vue模版

使用 Mustache 语法 插值 替换实例上的属性值

数据对象属性
class: {}, => 绑定class，和v-bind:class一样的API
style: {}, => 绑定样式，和v-bind:style一样的API
attrs: {}, => 添加行间属性
domProps: {}, => DOM元素属性
on: {}, => 绑定事件
nativeOn: {}, => 监听原生事件
directives: {}, => 自定义指令
scopedSlots: {}, => slot作用域
slot: {}, => 定义slot名称 和组件有关系，插曹
key: “key”, => 给元素添加唯一标识
ref: “ref”, => 引用信息

console.dir()

查看文档对象下所有的东西

console.time(‘test’);

console.timeEnd(‘test’);