vue中响应的数据绑定和视图组件/基本用法

组建的两个核心点
1.响应式数据绑定 2.组合的视图组件

核心点图

数据---vm视图模型---数据渲染的页面

根据MVVM模式解释双向绑定数据例子

  
  
     



  
  



  
   
{{message}}



  
  

vue.js入门实例，详细解说

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的实例

var vm = new Vue({
// 数据、模板、挂载元素、方法、生命周期钩子等选项
})

常见的几个：
data 类型 Object | Function
methods 类型 { [key: string]: Function }
el 类型 string | HTMLElement
template 类型 string
具体查看API

实例

  
  
  



  
  


    {{message}}


  
  

声明式渲染【如上&& vue常用】 PS 命令式渲染【原生】
声明式渲染 ： 只要关心在哪里（where）做什么（what）无需关心如何实现的（how）
命令式渲染：what +where+how

举例：给数组每个数字乘以2

声明式渲染【也可以如上实例中的举例】

命令式渲染

内置指令

内置指令

模板

模板：【三类】
1.html模板：基于DOM模板，模板是可解析的有效的Html
2.template字符串模板：模板将会替换挂载的元素，挂载元素的内容都将被忽略 // 根节点只有一个 //将html结构写在一对script标签中，这只为type="x-template"
3.模板---render函数

三个模板举例：

html模板

template字符串模板【两种方式】

  
  
  






Hello





 
 
 






Hello

模板---render函数

render 类型 function
render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode
createElement(标签名,[数据对象],子元素)
数据对象属性：

class:{} 绑定class,和v-blind:class 一样的API
style:{} 绑定class,和v-blind:style 一样的API
attrs:{} 添加行间属性
domProps:{} DOM元素属性
on:{} 绑定事件

总结：
1.渐进式框架Vue
2.vue中两个核心点
3.虚拟DOM
4.MVVM模式
5.Vue实例

6.声明式渲染
7.指令
8.模板
参考视频教程

请看第二节实现动态添加删除数据