Vue.js基础---简单的模板页面

Vue.js基础—简单的模板页面

1.模板页面包含了哪些东西？

–> html + js

2.js以什么形式(语法)存在？

插值: 双大括号表达式，插入一个动态的值在标签内文本内容上，动态显示数据
指令: vue自定义标签属性(以v-开头)，属性值是一个js的表达式 v-model=“msg”，指令操作的是标签
指令和插值中的表达式 自动 从data中动态取数据

3.双向数据绑定, 2个重要特点:

只要改变data中的数据值, 界面就自动更新 ===> 数据(单向)绑定 data ==> 模板页面
改变页面输入数据, data中的数据也可以自动改变 ===> 页面 ==> data

4.写一个简单的模板页面

1.引入Vue.js
2.创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
3.双向数据绑定 : v-model
4.显示数据 : {{xxx}}

<div id="test">
  <input type="text" v-model="msg">
  <p>Hello {{msg}}</p>
</div>
<p>Hello {{msg}}11111</p>

//引入Vue.js
<script src="../js/vue.js.js"></script>
<script>
  /* 创建Vue的实例 */
  const vm = new Vue({ // 配置对象: 属性名是一些特定的名称 每个属性就是一个选项
    el: '#test', // 值是选择器  element  用来查找根元素
    data: { // 包含多个可变数据的对象,为模板页面提供数据
      msg: 'I will back'
    }
  })

5.理解vue的mvvm实现
第一步，mvvm对应的是什么？
m：Model（模型）
v：View（视图）
vm：ViewModel（视图模型）
第二步，对应Vue中的什么？
m：Model（模型）–>基本js数据对象，对应Vue的data
v：View（视图）–>DOM，对应Vue的模板页面
vm：ViewModel（视图模型）–>视图模型，对应Vue的实例，vm充当管理者模式
第三步，作用
m：Model（模型）–>基本js数据对象，对应Vue的data–>包含数据的容器，是个对象，为模板页面提供数据！
v：View（视图）–>DOM，对应Vue的模板页面–>读取data对象中数据，动态显示，但是模板页面本身不具备这个能力，要靠vm！
vm：ViewModel（视图模型）–>视图模型，对应Vue的实例，vm充当管理者模式–>1.把data对象中数据塞进模板页面；2.绑定一个事件监听，当模板页面中数据发生改变，会实时保存到data对象里面去