为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Vue.js

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

核心点图

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

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

  <!DOCTYPE html>
  <html lang="en">
     <head><meta charset="UTF-8"><title>双向绑定数据</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
  </head>
  <body><!-- 视图模板 --><div id="demo">
  <input type="text" v-model="message"/>
   <p>{{message}}</p></div><script>
 // 数据模型
   let data={    message:'Hello World!'
   }   // 视图模型
    var vm=new Vue({        el:'#demo',        data:data
    });    console.log(vm)</script>
  </body>
  </html>
vue.js入门实例,详细解说

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

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

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

实例

  <!DOCTYPE html>
  <html lang="en">
  <head><meta charset="UTF-8"><title>vue.js入门实例</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
  </head>
  <body><!-- 模板 --><div id="demo">
    <span v-on:click="evenClick">{{message}}</span></div><script>// 数据
    let data={        message:'Hello World!'
    }// 视图模型//声明式渲染,只需要挂载选择器将数据渲染到模板
    var vm=new Vue({       el:'#demo',       data:data,       methods:{
        evenClick(){
            alert('Hello World')
        }
       }
    })</script>
  </body>
  </html>

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

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

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

  <!DOCTYPE html>
  <html lang="en">
  <head><meta charset="UTF-8"><title>声明式渲染</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
  </head>
  <body><script>
    var arr=[1,2,3,4,5];    var newArr=arr.map(function(item){           return item*2
        });    console.log(newArr)</script>
  </body>
  </html>

命令式渲染

  <!DOCTYPE html>
  <html lang="en">
  <head><meta charset="UTF-8"><title>命令式渲染</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
  </head>
  <body><script>
    var arr=[1,2,3,4,5];    var newArr=[];    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]*2)
    };    console.log(newArr)</script></body></html>

内置指令

内置指令

模板

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

三个模板举例:

html模板
  <!DOCTYPE html>
  <html lang="en">
  <head><meta charset="UTF-8"><title>html模板</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
 </head>
 <body>
 <div id="demo"><div v-html="html"></div></div><script>let obj={    html:"<div>Hello World</div>"}var vm=new Vue({  el:"#demo",  data:obj

});  </script>
  </body>
 </html>
template字符串模板【两种方式】
  <!DOCTYPE html>
  <html lang="en">
  <head><meta charset="UTF-8"><title>template模板1</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script></head><body><div id="demo"><div>Hello</div></div><script>var str="<div>Hello World</div>";var vm=new Vue({
  el:"#demo",
  template:str
});// 页面渲染结果是Hello World 而不是Hello,原因是template的权重较高//var str ="只能包含一个div,或者div里面嵌套div等其他元素,不能并列"  //在es6语法中,可以写成var  str=` `;【该符号在键盘上1的左边切换到英文模式】这种方式的好处是可以换行 </script></body></html>

 <!DOCTYPE html>
 <html lang="en">
 <head><meta charset="UTF-8"><title>template2模板</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script></head><body><div id="demo"><div>Hello</div></div><script type="x-template" id="temp"><div>Hello World</div></script><script>
  var vm=new Vue({
  el:"#demo",
  template:"#temp"});   //引入模板引擎,只能在本页面复用</script></body></html>
模板---render函数

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

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

  <!DOCTYPE html>
  <html lang="en">
  <head><meta charset="UTF-8"><title>template2模板</title><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script><style type="text/css">.yellow{    background-color: yellow
    }</style></head><body><div id="demo"></div><script>
   var vm=new Vue({
  el:"#demo",
  render(createElement){     var obj=createElement(          "ul",
          {            class:{
                yellow:true
            },
            style:{
                fontSize:"50px"
            },
            attrs:{
                type:"text",
                name:"email"
            }
          },
          [
            createElement("li",1),
            createElement("li",2),
            createElement("li",3)
          ]
        );
  console.log(obj)  return obj;
 
  }
}); </script>
 </body>
 </html>

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

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



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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消