探讨Vue.js的组件和模板


Posted in Javascript onOctober 27, 2017

摘要:

指令是Vue.js中一个重要的特性, 主要提供了一种机制将数据的变化映射为DOM行为。 那什么交数据的变化映射为DOM行为, Vue.js是通过数据驱动的, 所以我们不会直接去修改DOM结构, 不会出现类似$('ul').append('<li>one</li>')这样的操作, 当数据变化时,指令会一句设定好的操作对DOM进行修改, 这样就可以只关注数据的变化, 而不用去管理DOM的变化和状态,

Vue的内置指令

1. v-bind

v-bind主要用于绑定DOM元素属性(attribute),

即元素属性实际的值是有vm实例中的data属性提供的。

例如:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<div id="demo">
  <span v-bind:cutomId="id">{{message}}</span>
</div>
<script>
  //数据
  let obj ={
    message:"Hello World",
    id:'123'
  };
 //声明式渲染
  var vm = new Vue({
    el:'#demo',
    data:obj  });
</script>
</body>
</html>

v-bind可以简写为“:”,

上述例子可以简写为<span :cotomId="id">

实现效果如下:

探讨Vue.js的组件和模板 

2. v-on

绑定事件监听器,简写为@。

昨天我们也用过,我们简写一下看一下效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!-- HTML模版 -->
  <div id="demo">
    <span @click="clickHandle">{{message}}</span>
  </div>
  <script>
    //数据
    let obj = {
      message:"hello Vue"
    };
    //声明式渲染
    var vm = new Vue({
      el:"#demo",
      data:obj,
      methods:{
        clickHandle(){
            alert("click")
            }
      }
    });
  </script>
</body>
</html>

效果如下:

探讨Vue.js的组件和模板

3.v-html

v-html,参数类型为string,

作用为更新innerHTML,

接受的字符串不会进行编译等操作,

按普通HTML处理

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<div id="demo" v-html="HTML"></div>
<script>
  //数据
  let obj = {
    HTML:"<div>Hello World</div>"
  };
  var vm = new Vue({
    el:"#demo",
    data:obj  })
</script>
</body>
</html>

实现效果如下

探讨Vue.js的组件和模板

更多内置指令请查询官网:Vue.js指令

模板

html模板

        基于DOM的模板,模板都是可解析有效的html

插值

文本:使用“Mustache”语法(双大括号){{value}}

    作用:替换实例上的属性值,

    当值改变时,插值内容就会自动更新

原生的html:双大括号输出的是文本,不会解析html

属性:使用v-bind进行绑定,可以响应变化

使用JavaScript表达式:可以写简单的表达式

字符串模板

template字符串

        template选项对象的属性

        模板将会替换挂在元素。挂在元素的内容都将被忽略。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <div id="demo"></div>
  <script>
    //数据
    let obj = {
      html:"<div>String</div>",
      abc:1
    };
    var str = "<div>Hello</div>";
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:str    })
  </script>
</body>
</html>

有木有发现什么惊奇的变化

探讨Vue.js的组件和模板

        根节点只能有一个

        将html结构写在一对script标签中,设置type="X-template"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <div id="demo">
    <span>vue</span>
  </div>
  <script type="x-template" id="temp">
    <div>
      Hello,{{abc}},
      <span>sunday</span>
    </div>
  </script>
  <script>
    //数据
    let obj = {
      html:"<div>String</div>",
      abc:1
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:"#temp"
    });
  </script>
</body>
</html>

实现效果如下:

探讨Vue.js的组件和模板

写在script标签中,还是比较局限,

如果别的文件也是这个结构的时候,

这个就不能重复使用。

模板render函数

render函数

  render 选项对象的属性

  createElement(标签名,{数据对象},[子元素]);

  子元素为文本或者数组

我们还是来一段代码演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>render函数</title>
  <script src="../vue.js"></script>
  <style type="text/css">
    .bg{
      background: #ee0000;
    }
  </style>
</head>
<body>
  <div id="demo"></div>
  <script>
    //数据
    let obj = {
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      render(createElement){
        return createElement(
          //元素名
          "ul",
          //数据对象
          {
            class:{
              bg:true
            }
           },
          //子元素
          [
            createElement("li",1),
            createElement("li",2),
            createElement("li",3)
          ]
        );
      }
    })
  </script>
</body>
</html>

实现效果如下

探讨Vue.js的组件和模板

关于数据对象属性,讲情请参考官网的例子。

Vue.js官网

总结

以上所述是小编给大家介绍的Vue.js的组件和模板,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
node事件循环和process模块实例分析
Feb 14 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
利用javaScript处理常用事件详解
Apr 14 Javascript
React更新渲染原理深入分析
Dec 24 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 #Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 #Javascript
Express系列之multer上传的使用
Oct 27 #Javascript
微信小程序返回多级页面的实现方法
Oct 27 #Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Python中对列表排序实例
2015/01/04 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python读取csv文件实例解析
2019/12/30 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
组织关系转移介绍信
2014/01/16 职场文书
上课玩手机检讨书
2014/02/08 职场文书
学习决心书
2014/03/11 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
如何在C++中调用Python
2021/05/21 Python
Django与数据库交互的实现
2021/06/03 Python