vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。 Vue.js组件系统 每一个新技术的诞生，都是为了解决特定的问题。组件的出现就是为了解决页面布局等等一系列问题。vue中的组件分为两种，全局组件和局部组件。 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue...
Vue.js 组件提供了一个 functional 开关，设置为 true 后，就可以让组件变为无状态、无实例的函数化组件。因为只是函数，所以渲染的开销相对来说，较小。函数化的组件中的 Render 函数，提供了第二个参数 context 作为上下文，data、props、slots、children 以及 parent 都可以通过 context 来访问。1 示例这里，我们用 functional 函数化组件来实现一个智能组件。html：<div id="app"><smart-component :data="data"></smart-co...
我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。 1 基础用法 1.1 文本输入框（text） 这里演示了在文本输入框上输入的内容，会实时映射到绑定的数据上。 html：<div id="app"><input type="text" v-model="content" placeholder="请输入"><p>输入框：{{content}}</p> </div>js： <script>var app = new Vue({el: #app,data: {content: }}); </script>效果：1.2 大文本输入框（textarea） 绑定方法与文本输入框相...
v-on 事件指令用于绑定事件。 1 基础用法 v-on 指令绑定事件后，就会监听相应的事件。 html： <div id="app"><h3>已点击 {{count}} 次</h3><button @click="count++">点我</button> </div>注意： @click 是 v-on:click 的简写形式， @ 即表示 v-on: 。 js： <script>var app = new Vue({el: #app,data: {count:0}}); </script>效果：@click 表达式即可以直接使用 js 语句，也可以是一个定义在 vue 实例中 methods 内的函数名。 htm...
1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时，就会用到列表渲染指令 v-for。 它的表达式需要结合 in 来使用，类似 item in items 的形式。 1.1 遍历数组 html： <div id="app"><ul><li v-for="n in news">{{n.title}}</li></ul> </div> js： <script>var app = new Vue({el: #app,data: {news: [{title: 被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照},{title: 黑莓宣布14亿美元收购网络安全公司Cylance},{ti...
1 用法 v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。 html： <div id="app"><p v-show="type===科技">大数据之下的锦鲤：为什么你的微博总抽不到奖</p> </div>js： <script>var app = new Vue({el: #app,data: {type:技术}}); </script>渲染后代码： <p style="display: none;">大数据之下的锦鲤：为什么你的微博总抽不到奖</p>因为元素样式被设置为 display: none; ，所以元素就被隐藏啦O(∩_∩)O~ ...
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值，来决定在 DOM 中是渲染还是销毁元素或组件。 html： <div id="app"><p v-if="type===1">拌面</p><p v-else-if="type===2">扁肉</p><p v-else="type===3">其它</p> </div>js： <script>var app = new Vue({el: #app,data: {type: 2}}); </script>输出结果：扁肉当表达式的值为 true 时，当前元素或组件及所有的子节点都会被渲染出来。 2 应用于多个元素 上述示例中的代...
先来看下vue.js 中的v-cloak 指令可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。 html： <div id="app">{{context}} </div>js： <script>var app = new Vue({el: #app,data: {context:互联网头部玩家钟爱的健身项目}}); </script>效果：我们...
介绍 在使用Vue.js时，Vue.js组件非常重要。在本教程中，我们将深入研究Vue.js组件，理解基础知识并将其应用于应用程序。让我们开始吧。 什么是组件？ 组件使我们能够将 复杂的 应用程序分解成小块。例如，典型的Web应用程序将具有标题，侧边栏，内容和页脚等部分。 Vue.js允许我们将每个部分分解成单独的模块化代码，称为组件。这些组件可以扩展，然后附加到 你 正在处理的应用程序。 使用 组件是 在 整个应用程序 编写 中重用代...
什么是Vue.js？vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过对其进行相互连接、修改和扩大，构成所要求的系统。）Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的...
Vue.js的事件处理监听事件我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。 <div class="box">{{msg}}<input type="button" value="按钮" v-on:click="msg+=1"/> </div> var vm = new Vue({el:".box",data:{msg:1}, })结果方法事件处理器许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。 <div class="box">{{msg}}<input type="butto...
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形： 使用一 我们在data里面定义好图片路径 imgUrl:../assets/logo.png然后，在template模板里面 /*错误写法*/ <img src="{{imgUrl}}">这样是错误的写法，我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl">或者 <img src="../assets/logo.png">这种方式是按照正常HTML语法引用路径，放在模板里可以被webpack打包出来。 使用二 当我们需要在js代码里面写图片路径的...
本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 1.共同点 都是动态显示DOM元素 2.区别 （1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐； （2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； （3）编译条件：v-if是惰...
这两天学习了Vue.js 中的 $watch这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。github 源码 Observer, Watcher, vm 可谓 Vue 中比较重要的部分，检测数据变动后视图更新的重要环节。下面我们来看看 如何实现一个简单的 $watch 功能，当然Vue 中使用了很多优化手段，在本文中暂不一一讨论。 例子: // 创建 vm let vm = new Vue({data: a })// 键路径 vm.$watch(a.b.c, function () {// 做点什么 }) 先阐明在这个 ...
前言 最近公司用vue框架写交互，之前没怎么写过，但是很多数据双向绑定的东东跟angular很像！所以上手很快！哈哈今天就碰到一个vue的问题啊！！产品需求是，datetimepick时间选择器一更改时间，就重新ajax获取数据渲染图表，很简单的需求啊！用angula ng-change监听inpu框框，分分钟搞定啊！用特么js原生 on-change也分分钟搞定啊！问题是尼玛的VueJs对input框没有change事件！尼玛坑爹啊！（不知道是不是我没找到，反正api里没有，...