VUE
vue2.0
零妖大盗 V8
好的艺术家复制,伟大的艺术家偷窃
展开
-
【VUE】组件递归的用法
comment.vue<template> <div> <div v-for="(item, index) in comment_list" :key="index"> <a-comment> <span slot="actions">{{ item.actions || "回复" }}</span> <a slot="author">{{ item.commen原创 2021-03-22 11:44:52 · 310 阅读 · 0 评论 -
VUE2.0学习之路1【开始】 第一个Vue实例
环境VUE版本 2.0 下载:https://cn.vuejs.org/v2/guide/installation.html Node.js版本 v12.13.1 npm版本 6.13.4 cnpm版本 6.1.0 安装淘宝镜像:sudo npm install -g cnpm --registry=https://registry.npm.taobao.org IDE VSC...原创 2019-12-26 15:28:11 · 284 阅读 · 1 评论 -
VUE2.0学习之路2【内部指令】 v-if 和 show的使用及区别
v-if 和 v-else 的使用 <div id="app"> <div v-if="is_login">Hello,User!</div> <div v-else>Please Login!</div> </div> <script type="text/...原创 2019-12-26 15:28:49 · 232 阅读 · 0 评论 -
VUE2.0学习之路3【内部指令】 v-for的使用及v-for中的排序操作
简单的v-for实例 <div id="app"> <ul> <li v-for = "item in items"> {{item}} </li> </ul> </div> <sc...原创 2019-12-26 15:29:04 · 2004 阅读 · 0 评论 -
VUE2.0学习之路4【内部指令】 v-text 和 v-html
VUE 在html中,使用{{ data_field_name }} 将data中的值输出到页面,但是当网络不够给力,页面不能及时获取到data数据的时候,或者javascript出错的时候,这时就会暴露出源码中字段名字,比如第一节中的 message : "Hello World !"。不会渲染出 Hello World !而是直接在页面显示出 {{ message }}。他人就可知我们的dat...原创 2019-12-26 15:29:21 · 214 阅读 · 0 评论 -
VUE2.0学习之路5【内部指令】 v-on 监听事件
v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码。<body> <h1>v-on 事件监听器</h1> <hr> <div id="app"> 本场比赛得分: {{count}}<br /> <button v-on:...原创 2019-12-26 15:29:40 · 373 阅读 · 0 评论 -
VUE2.0学习之路6【内部指令】 v-model 绑定数据源
v-model指令,理解为绑定数据源。就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定。<body> <h1>v-model 双向数据绑定</h1> <hr> <div id="app"> <p>原始文本信息:{{message}}</p> ...原创 2019-12-26 15:30:07 · 238 阅读 · 0 评论 -
VUE2.0学习之路7【内部指令】 v-bind处理HTML中的标签属性
v-bind处理HTML中的标签属性绑定CSS,在绑定CSS样式的时候,绑定的值必须在vue中的data属性中进行声明。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2019-12-26 15:30:27 · 321 阅读 · 0 评论 -
VUE2.0学习之路8【内部指令】 其他指令 v-pre v-cloak v-once
v-pre在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。<div>{{message}}</div> <!-- 输出Hello World --><div v-pre>{{message}}</div> <!-- {{message}} -->v-cloak...原创 2019-12-26 15:30:38 · 223 阅读 · 0 评论 -
VUE2.0学习之路9【全局API】Vue.directive
全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。使用Vue.directive 构造我们自己的指令,在前些章节中的说到的都是内部指令,都是在构造器内的。在这一章中,我们使用Vue.directive 自定义我们自己的指令。比如,我们...原创 2019-12-26 15:31:01 · 240 阅读 · 0 评论 -
VUE2.0学习之路10【全局API】 Vue.extend
Vue.extend 是什么Vue.extend返回的是一个“拓展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件。可以简单理解为:当在模板中,遇到该组件名称作为标签的自定义元素时,自动调用“拓展实例构造器”来生产组件实例,并挂在到自定义元素上。上面的引用中说了,extend主要用来结合 conponent 生产组件。在了解组件之前...原创 2020-01-30 14:15:34 · 344 阅读 · 0 评论