主要内容:v-on,v-on,v-on事件监听可以使用 v-on 指令: v-on <div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script> 通常情况下,我们需
主要内容:Vue.js class,class 属性绑定,实例 1,实例 2,实例 3,实例 4,实例 5,实例 6,,Vue.js style(内联样式),实例 7,实例 8,实例 9Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 class 属性绑定 我们可以为
主要内容:实例,实例本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器: 实例 <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px
主要内容:实例 1,实例 2,computed vs methods,实例 3,computed setter,实例 4计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1 <div id="app"> {{ message.split('').reverse().join('') }} </div> 实例 1 中模板变的很复杂起来,也不容易看懂理解。 接下来我们看看使用了计算属性的实例: 实例 2 <div id="app">
主要内容:Vue.js 循环语句,v-for 指令,v-for,v-for,v-for,v-for,v-forVue.js 循环语句 循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 指令 <div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li>
主要内容:条件判断,v-if 指令,v-else 指令,v-else 指令,v-show 指令条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-if 指令: <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>小牛知识库</h1> <p>学的不仅是技术,更是梦想!</p> <p>哈哈哈,打字辛苦啊!!!</p> </template> </div>
主要内容:插值,文本插值,v-html 指令,v-bind 指令,JavaScript 表达式,指令,实例,实例,用户输入,双向数据绑定,字符串反转,过滤器,实例,缩写Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值 文本 数据绑定
主要内容:实例,实例,实例每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: 实例 <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var
主要内容:src/APP.vue,src/components/Hello.vue上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse、Atom等) 中打开该目录,结构如下所示: 目录解析 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
主要内容:1、独立版本,2、使用 CDN 方法,Staticfile CDN(国内),unpkg(推荐),cdnjs,3、NPM 方法,命令行工具,Vue 项目打包1、独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 下载 Vue.js 2、使用 CDN 方法 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。 Staticfile CDN(国内) : https://cdn.staticfile.
主要内容:阅读本教程前,您需要了解的知识:,第一个实例,Vue 2.0 Hello World,参考资料:Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试,Vue3 请参阅 Vue3 教程。 阅读本教程前,您需要了解的知识: HTML CSS JavaScr
主要内容:setup 组件,实例(src/APP.vue),实例,Vue 组合式 API 生命周期钩子,实例,实例,实例,模板引用,实例,实例,实例,实例Vue3 组合式 API(Composition API) 主要用于在大型组件中提高代码逻辑的可复用性。 传统的组件随着业务复杂度越来越高,代码量会不断的加大,整个代码逻辑都不易阅读和理解。 Vue3 使用组合式 API 的地方为 setup。 在 setup 中,我们可以按逻辑关注点对部分代码进行分组,然后提取逻辑片段并与其他组件共享代码。因
主要内容:GET 方法,GET 实例,GET 实例,传递参数说明,POST 方法,POST 实例,传递参数说明,执行多个并发请求,实例,axios API,实例Vue 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Github开源地址: https://github.com/axios/axios 安装方法 使用 cdn: 或 使用 npm: 使用 bower: 使用 yarn: 使用方法:
主要内容:实例,选项合并,实例,实例,全局混入,实例混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 来看一个简单的实例: 实例 // 定义混入对象 const myMixin = { created() { this.hello() }, methods: { hello() { console.log('欢迎来到混入实例-RUNOOB!'
主要内容:安装,简单实例,HTML 代码,JavaScript 代码,<router-link> 相关属性本章节我们将为大家介绍 Vue 路由。 Vue 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue 可以实现多视图的单页 Web 应用(single page web application,SPA)。 Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router 文档。 安装 1、直接下载 / CDN NPM 推荐使用淘宝镜像: 简单实例 Vue.j