探讨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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
判断访客终端类型集锦
Jun 05 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
js读取cookie方法总结
2014/10/31 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Python while true实现爬虫定时任务
2020/06/08 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
电大本科自我鉴定
2014/02/05 职场文书
新年团拜会主持词
2014/04/02 职场文书
说明书怎么写
2014/05/06 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书