栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

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

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

实例
  
  
  vue.js入门实例
  
  
    {{message}}
  
  

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

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

声明式渲染【也可以如上实例中的举例】
  
  
  声明式渲染
  
  
  
  
命令式渲染
  
  
  命令式渲染
  
  
 
 
 
  
 
template字符串模板【两种方式】
  
  
  template模板1Hello

 
 
 template2模板Hello
模板---render函数

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

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

  
  
  template2模板.yellow{    background-color: yellow
    }
 
 

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

6.声明式渲染
7.指令
8.模板



作者:Searchen
链接:https://www.jianshu.com/p/19852ba8e974


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241445.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号