探讨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 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
vue中如何使用ztree
Feb 06 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
JavaScript中关于base64的一些事
May 06 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判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
JavaScript实现手风琴效果
2021/02/18 Javascript
python清除字符串里非数字字符的方法
2015/07/02 Python
Python输出各行命令详解
2018/02/01 Python
Python中修改字符串的四种方法
2018/11/02 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Python基于locals返回作用域字典
2020/10/17 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
HR喜欢的自荐信格式
2013/10/08 职场文书
小学毕业感言500字
2014/02/28 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
武侯祠导游词
2015/02/04 职场文书
2016年元旦主持词
2015/07/06 职场文书
学习经验交流会总结
2015/11/02 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis