探索Vue.js component内容实现


Posted in Javascript onNovember 03, 2016

现在来系统地学习一下Vue(参考vue.js官方文档):

Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定组合的试图组件

Vue.js拥抱数据驱动的视图概念,这意味着我们能在普通的HTML模板中使用特殊的用法将DOM“绑定”到底层数据。一旦创建了绑定,DOM将于数据保持同步。

探索Vue.js component内容实现

以下参考代码与上面的模型相对应

<!-- 这是我们的 View -->
<div id="example-1">
   Hello {{ name }}!
</div>
// 这是我们的 Model
var exampleData = {
   name: 'Vue.js'
}
 
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var exampleVM = new Vue({
   el: '#example-1',  // 在一个id为'example-1'的实体上挂载
   data: exampleData  // 数据流
})

通常我们会把Model写在Vue实例当中,下面写法与上面写法效果一样:

<!-- 这是我们的 View -->
<div id="example-1">
   Hello {{ name }}!  <!--- Vue的数据模型用{{datamodel}}包裹起来 --->
</div>
 
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model<br><script>
var exampleVM = new Vue({
   el: '#example-1',  // 在一个id为'example-1'的实体上挂载
   data: {
       name: 'Vue.js'
      } // 数据流
})<br></script>

这样一段程序执行后,在#example-1这个控件中就会显示‘Hello Vue.js!'。

下面来看看指令(Directives):
指令是特殊的带有前缀 v- 的特性,指令的值限定为绑定表达式,比如一个if的指令:

<p v-if="greeting">hello!<p>

还有绑定指令,即将某些属性值与一些值相绑定,比如:

<input :type = "questItem.type", :name = "questItem.name"/>

这里省略了“v-bind”,使得input的属性值赋值具有“计算”的效果。 

计算属性

这里介绍一下$watch的用法,用于当一个数据需要根据其他的数据而变化时的情况:

<script><br>var vm = new Vue({
 el: '#demo',
 data: {
  firstName: 'Foo',
  lastName: 'Bar',
  fullName: 'Foo Bar'
 }
})<br></script>
 
vm.$watch('firstName', function (val) { // 当firstname改变时,立马更新vm.fullname
 this.fullName = val + ' ' + this.lastName
})
 
vm.$watch('lastName', function (val) {  // 当lastname改变时,立马更新vm.fullname
 this.fullName = this.firstName + ' ' + val
})

在这里,所有的数据的对象都可以通过vm.firstname等来访问。

 

v-model

顾名思义,就是Vue当中的数据模型,它用来绑定Vue实例中的数据:

<!--- bi-direction bound --->
<div id="app">
  <p>{{message}}</p>
  <input v-model="message"> <!--Model,input输入的数据会立即反馈到Vue实例中--> 
</div>
<script>
  new Vue({
    el: '#app',  // View
    data: {
      message: 'Hello Vue.js'
    }
  })
</script>

比如要用来绑定一个表单控件,就是把选择的值显示出来:

<!---    表单控件绑定-单选 --->
<div id="myselect">  // 外面这一层我一开始没有加,然后就出错了,el好像一般是挂载在<div>构件上
<select v-model="selected"> // data的数据类型是selected,值是选取的值
  <option seleceted>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
 
<script>
  new Vue({
    el: '#myselect',
    data:{
      selected:[]
    }
  })
</script>

v-if, v-else   

这个指令可以用的很灵活,比如我在表单中生成新题目,有“单选题”、“多选题”、“文本题”三种,那么针对不同的题目应该显示的控件有所不同,这时可以使用如下语法:

<div v-if="questItem.type === 'textarea'"> // 注意是三个等号
    <textarea></textarea>
</div>
<div v=else>
    <div></div>
</div>
 

v-for

这个用于对数组元素的遍历,举个例子: 

<ul id="demo">
  <li
    v-for="item in items"
    class="item-{{$index}}">  <!--- $index指的是当前数组元素在数组中的位置 --->
    {{parentMessage}} - {{$index}} - {{item.message}} <!--一个view结构-->
  </li>
</ul>
<button id="btn1">点击我</button>
<script>
  var demo= new Vue({
    el: '#demo',
    data:{
      parentMessage: 'Parent',
      items:[
        {message: 'Foo'},
        {message: 'Bar'}
      ]
    }
  })
</script>

以上代码的意思是遍历demo实例中的items数组,将里面的每一个数组元素('Foo','Bar')分别在<li>标签中显示出来

为了避免对整个列表进行渲染,经常会使用:track-by = "$index",表示只对当前数组元素进行操作。

至此,关于Vue的最基本的东西已经介绍完,需要更多的API资料可以参考: http://cn.vuejs.org/api/ 

Vue文件的结构以及数据流的控制

在vue文件中,我们经常可以看到这样的格式:

<template>
    <div> </div>
</template>
 
<script>
    export default{
       data(){ ...
       },
       methods:{ // 自定义方法,可对data进行处理
          method1(){ ... }
          ...     
       },
       components: { ... }
       vuex: {
          getters:{ // 获取store的数据
            questionnaire: state => state.currentQuestionnaire
          }
          actions: { //用来分发数据容器store中mutations方法
            action1(){ dispatch("SET_QUEST", item) } // dispatch用来调用父组件store的"SET_QUEST"方法
            action2(){ ... }
       } 
       directives: {
          'my-directive': {
            bind: function(){ //钩子函数,只调用一次,在指令第一次绑定到元素上时调用 }
            update: function(newValue, oldValue) { //钩子函数,在bind之后以初始值为参数第一次调用,之后每当绑定至变化时调用 }
            unbind: function(){ //钩子函数,只调用一次,在指令从元素上解绑时调用 }
          }
       }  




// 自定义指令,在<template>中以<div v-my-directives = ""> 方式调用    
     }
</script>
 
<style>  </style>

<template>中放置的是这个页面(或者页面的一部分)所拥有的控件,而<script>中定义的是Vue的数据对象和方法,<style>中定义的是控件的css样式。

在methods中经常使用到“this”关键字,该关键字指向Vue组件实例。

event.target: 触发事件的具体控件,不产生冒泡作用,是谁就是谁,这个在锁定事件触发的控件时经常用到,比如:

<div @click.stop = "addItem($event)">
   <span data-type = "radio">单选题</span>
   <span data-type = "checkbox">多选题</span>
   <span data-type = "textarea">文本题</span>
</div>
 
<script>
   export default{
      method: {
          addItem(event){
             let target = event.target
             if(target.nodeName.toLowerCase() === 'span') { // 当点击了选择的按钮后
                this.showMask = true  // 显示弹出框
                this.questItem.type = target.dataset.type  // 设置问题的类型
             }
      }
   }
</script>

最后讲讲this.$els: 一个对象,包含注册有v-el的DOM元素

<div class = "promt-header">
  <div>
     <label> 问题名称: </label>
     <input type = "text", placeholder = "请输入标题" v-el: item-title/>
  </div>
</div>
<div class = "promt-footer" @click.stop = "handleInput(&event)">
   <button type = "button" data-operation = "confirm"> 确定 </button>
   <button type = "button" data-operation = "cancel"> 取消 </button>
</div>
 
<script>
   methods: {
        handleInput(event) {
          let target = event.target
          if(target.nodeName.toLowerCase() !== 'button') {
            return
          }
          let itemTitle = this.$els.itemTitle
          let itemSelections = this.$els.itemSelections
          if(target.dataset.operation === "confirm") {
            if(this.questItem.type === "textarea") {
              this.addTextarea(itemTitle)
            } else {
              this.addSelections(itemTitle, itemSelections)
            }
          } else {
            this.handleCancel()
          }
        },
   }
</script>

上面的代码是不完整的,但是可以看到,v-el把该控件挂载在一个名字为"item-title"的实体中,我们可以通过this.$els.itemTitle将其提取出来

要使用该控件的属性值(输入值),可以这样:

this.$els.itemTitle.value

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
jquery操作select大全
Apr 25 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 #Javascript
预防网页挂马的方法总结
Nov 03 #Javascript
网页挂马方式整理及详细介绍
Nov 03 #Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 #Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 #Javascript
基于vuejs+webpack的日期选择插件
May 21 #Javascript
Vue.js创建Calendar日历效果
Nov 03 #Javascript
You might like
php的access操作类
2008/04/09 PHP
mac下安装nginx和php
2013/11/04 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
php实现的操作excel类详解
2016/01/15 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
JavaScript 的继承
2011/10/01 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
Ionic快速安装教程
2016/06/03 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python自动重试HTTP连接装饰器
2015/04/28 Python
Python与R语言的简要对比
2017/11/14 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
精灵市场:Pixie Market
2019/06/18 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
货车司机岗位职责
2014/03/18 职场文书
员工安全责任书范本
2014/07/24 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
学校捐款活动总结
2015/05/09 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL