vue
soliderzzz
沉迷学习,不能自拔,strategic FooYou Agent
展开
-
Vue.js 目录结构
目录解析目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: assets: 放置一些图片,如logo等。...转载 2019-07-25 20:03:05 · 135 阅读 · 0 评论 -
Vue.js Ajax(axios)
Vue.js Ajax(axios)Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。Github开源地址:https://github.com/axios/axios安装方法使用 cdn:<script src="https://unpkg.co...转载 2019-07-30 19:50:37 · 1073 阅读 · 0 评论 -
Vue.js Ajax(vue-resource)
Vue.js Ajax(vue-resource)Vue 要实现异步加载需要使用到 vue-resource 库。Vue.js 2.0 版本推荐使用axios来完成 ajax 请求。<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>...转载 2019-07-30 19:51:27 · 487 阅读 · 0 评论 -
Vue.js 响应接口
Vue.js 响应接口Vue 可以添加数据动态响应接口。例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应。实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20 。实例<div id = "app"> <p style = "font-size...转载 2019-07-30 19:55:50 · 354 阅读 · 0 评论 -
Vue.js 实例
Vue.js 实例本章节为大家介绍几个 Vue.js 实例,通过实例练习来巩固学到的知识点。导航菜单实例导航菜单创建一个简单的导航菜单:<div id="main"> <!-- 激活的菜单样式为 active 类 --> <!-- 为了阻止链接在点击时跳转,我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -...转载 2019-07-30 19:53:40 · 313 阅读 · 0 评论 -
Vue.js 起步
Vue.js 起步每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下:var vm = new Vue({ // 选项})接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:实例<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{ur...转载 2019-07-25 20:04:17 · 164 阅读 · 0 评论 -
Vue.js 模板语法
Vue.js 模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。插值文本数据绑定最常见的形式就是使用 {{......转载 2019-07-25 20:06:02 · 225 阅读 · 0 评论 -
Vue.js 条件与循环
Vue.js 条件与循环条件判断v-if条件判断使用 v-if 指令:v-if 指令在元素 和 template 中使用 v-if 指令:<div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> &...转载 2019-07-25 20:07:37 · 463 阅读 · 0 评论 -
《深入浅出vue.js》----array数组变化侦测
1、如何追踪变化数组的侦测方式和对象不同,比如:this.list.push(1)此时并不会像改变对象一样触发setter。同理,要侦测数组的变化意味着我们在改变数组的时候得到通知,如图,我们可以用一个拦截器覆盖Array.prototype,每当使用array原型方法时,实际执行的是拦截器中的方法,而拦截器中的方法储存原生方法实现。2、实现拦截器拦截器其实是一个和...原创 2019-08-24 15:55:09 · 222 阅读 · 0 评论 -
Vue.js 混入
Vue.js 混入混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。来看一个简单的实例:实例var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); // 定义一个混入对象 var my...转载 2019-07-30 19:49:51 · 422 阅读 · 0 评论 -
Vue.js 过渡 & 动画
Vue.js 过渡 & 动画本章节我们主要讨论 Vue.js 的过渡效果与动画效果。过渡Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。语法格式<transition name = "nameoftransition"> <div><...转载 2019-07-30 19:49:02 · 344 阅读 · 0 评论 -
Vue.js 计算属性
Vue.js 计算属性计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子:实例 1<div id="app"> {{ message.split('').reverse().join('') }} </div>尝试一下 »实例 1 中模板变的很复杂起来,也不容易看懂理解。接下来我们看...转载 2019-07-29 19:51:08 · 433 阅读 · 0 评论 -
Vue.js 监听属性
Vue.js 监听属性本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器:实例<div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @cl...转载 2019-07-29 19:52:47 · 783 阅读 · 0 评论 -
Vue.js 样式绑定
Vue.js 样式绑定Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的...转载 2019-07-29 19:53:35 · 292 阅读 · 0 评论 -
Vue.js 事件处理器
Vue.js 事件处理器事件监听可以使用 v-on 指令:v-on<div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> n...转载 2019-07-29 19:54:22 · 189 阅读 · 0 评论 -
Vue.js 表单
Vue.js 表单这节我们为大家介绍 Vue.js 表单上的应用。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:<div id="app"> <p>input 元素:&l...转载 2019-07-29 19:55:08 · 159 阅读 · 0 评论 -
Vue.js 组件
Vue.js 组件组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:注册一个全局组件语法格式如下:Vue.component(tagName, options)tagName 为组件名,options 为配置...转载 2019-07-29 19:55:50 · 110 阅读 · 0 评论 -
Vue.js 自定义指令
Vue.js 自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:实例<div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus>...转载 2019-07-30 19:46:55 · 188 阅读 · 0 评论 -
Vue.js 路由
Vue.js 路由本章节我们将为大家介绍 Vue.js 路由。Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。Vue.js 路由需要载入vue-router 库中文文档地址:vue-router文档。安装1、直接下载 / CDNht...转载 2019-07-30 19:47:48 · 847 阅读 · 0 评论 -
《深入浅出vue.js》----object变化侦测
1、什么是变化侦测?通常,在运行时应用内部的状态会不断发生变化,此时需要不停地重新渲染页面,这时如何确定状态中发生了什么变化?变化侦测就是用来解决这个问题的,它分为两种类型,一种是“推”(push),另一种是拉(pull)。angular和react的变化侦测属于“拉”,即当状态发生变化时,它不知道那个状态变了,只知道状态可能变了,然后会发送一个信号通知框架,框架内部收到信号后,就会进...原创 2019-08-12 20:05:40 · 367 阅读 · 0 评论