第一次使用vue.js

html部分:

    <div region="center" border="false" title="2.选择时间段">
        <div class="Chart" id="chartContainer">
            <div class="icon">
                <span class="gray"></span>未开放<span class="green"></span>已预约<span class="blue"></span>可预约</div>
            <div class="content">
                <div class="date" id="yData">
                    <dl v-for="ymd in YMDArr">
                        <dt>{{ ymd.YMD }}</dt>
                        <dd>
                            {{ ymd.WeekName }}
                        </dd>
                    </dl>
                </div>
                <div class="echart">
                    <div class="echart_block" id="xData">
                        <div class="tu" v-for="ymd in YMDArr">
                            <ul>
                                <li v-bind:title="sjd.BeginHHmm+‘-‘+sjd.EndHHmm" v-bind:class="[sjd.State==‘0‘?‘gray‘:sjd.State==‘1‘?‘blue‘:‘green‘]"
                                    v-bind:style="{‘width‘:Math.ceil((sjd.Interval/$(‘#xData‘).width())*100)+‘%‘}"
                                    v-bind:tt="sjd.Begin" v-on:click="yuYue($event);" v-for="sjd in ymd.SJDArr">{{ sjd.BeginHHmm
                                    + ‘-‘ + sjd.EndHHmm }} </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </div>
js部分:      $.ajax({
        type: "POST",
        dataType: "json",
        url: "",
        data: { ShiYanShiID: shiYanShiNode.id, ZuoWeiID: zuoWeiNode.id, KaiShiRiQi: $("#KaiShiRiQi").val(), JieShuRiQi: $("#JieShuRiQi").val() },
        async: false,
        success: function (json) {
            var yDataApp = new Vue({
                el: ‘#yData‘,
                data: {
                    YMDArr: json.YMDArr
                }
            });

            var xDataApp = new Vue({
                el: ‘#xData‘,
                data: {
                    YMDArr: json.YMDArr,
                    interval: json.Interval,

                },
                methods: {
                        yuYue: function (e) {
                            var obj = e.currentTarget;
                            // 测试
                            alert($(obj).attr("tt"));
                        }
                    }
            });

            var timeDataApp = new Vue({
                el: ‘#timeData‘,
                data: {
                    data: json.XData
                }
            });
        },
        error: function (XMLHttpRequest) {
            AlertError(XMLHttpRequest);
        }
    });        
时间: 2024-11-05 13:34:37

第一次使用vue.js的相关文章

Vue.js中传值给子部件及触发动作的问题

最近研究一个用vue.js做的程序并修改增加功能.其中用到传值给子部件等问题. template中有个子部件: <template> ...... <child-form  v-if="flag=1" ></child-form> 要传值给它,方法是: 1. 本template中定义一个data: data() { return { flag:0, someId:"" } } 2. 子部件中定义一个props: props: [

Vue.js 源码学习之Flag篇

The Progressive JavaScript Framework --vuejs.org 起因 第一次接触 Vue.js 是因为要做一个通讯录的外包项目,这个项目要有前台展示和中后台管理,从轮子做起肯定是不明智的选择,所以当时初步定下的是 Vue.js + Element UI 的技术栈. 项目过程很漫长,因为给的钱实在是可有可无,权当是学习了. 项目的接口是交给了同学. 整个项目采用的是钱后端分离的开发模式,我做我的页面,他做他的接口. 项目出了两个版本,做的时候,中间就强行的看文档.

实例分析Vue.js中 computed和method不同机制

在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

Vue.js——60分钟组件快速入门(下篇)

概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开通了一个驿站,你把东西放到驿站我就可以拿到了." 今天我们将着重介绍slot和父子组件之间的访问和通信,slot是一个非常有用的东西,它相当于一个内容插槽,它是我们重用组件的基础.Vue的事件系统独立于原生的DOM事件,它用于组件之间的通信. 本文的主要内容如下: 组件的编译作用域 在组件templ

vue.js在windows本地下搭建环境和创建项目

Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. 首先vue.js的作者是中国人,所以说他是国产的,吸收了google的angular.js和facebook的react.js的特性,摒弃了jquery传统的DOM操作,采用数据绑定和指令等概念,可以说是未来WEB端开发的

[译]怎样在Vue.js中使用jquery插件

原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候. 问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力. 我试图寻找一些东西来帮助自己解决这个问题,但是我发现一些组件所做的工作不是很让我满意,所以

vue.js基础知识篇(2):指令详解

第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v-text,v-el,v-html,v-on,v-bind,v-ref,v-pre,v-cloak,v-if. 2.内部指令 (1)控制元素的显示与否:v-if,v-show.v-else v-if是真实的条件渲染,根据表达式的true/false在DOM中生成或移除一个元素. 第一,这个指令是惰性

vue.js基础知识篇(4):过滤器、class与style的绑定2

代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做字符串处理,不带引号的参数被当做数据属性名处理. {{message | filterFunction "arg1" arg2 }} vue.js支持在任何出现表达式的地方添加过滤器. vue.js支持链式调用,上一个过滤器的输出结果作为下一个过滤器的输入.类似于Linux shell的管

Vue.js 实例方法

Vue 实例方法 实例属性 1.组件树访问 1-1.vm.$parent 用来访问当前组件实例的父实例,如果当前实例有的话 1-2.vm.$root 当前组件树的根 Vue 实例.如果当前实例没有父实例,此实例将会是其自已 1-3.vm.$children 类型:Array<Vue instance> 当前实例的直接子组件.需要注意 $children 并不保证顺序,也不是响应式的.如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,