VueJS
关注
分享
扫一扫
_cheny
慢慢来，会很快
展开
-
VueJS----[内部指令-1.2]----v-if v-else v-show 指令
v-if v-else v-show 指令一、v-if： v-if:是Vue的一个内部指令，用在html的标签中 v-if:用来判断是否加载HTML的dom, 举个例子：模拟是否登录 效果图： 这里在vue的data中定义了isLogin，为true的时候显示，为false的时候隐藏 二、v-else： 经常和v-if结合使用，类似于java中的if else 三、...原创 2018-07-23 23:05:40 · 171 阅读 · 0 评论 -
VueJS----[全局API-2.4]----Vue的生命周期（钩子函数）
Vue的生命周期（钩子函数）Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段进行操作数据或者改变内容 下面看一段代码<div id="app"> {{message}} <p><button @click="add">add</button></p>原创 2018-08-25 23:41:26 · 454 阅读 · 0 评论 -
VueJS----[全局API-2.3]----Vue.set全局操作
Vue.extend构造器的延伸Vue.set的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在Vue构造器内部定义一个count为1的数据，我们在构造器外部定义的一个方法，要每次点击按钮给值加1，就需要用到Vue.set1.引用构造器外部数据什么是外部数据，就是不在构造器里的data处声明，然后再data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获...原创 2018-08-25 23:35:49 · 406 阅读 · 0 评论 -
VueJS----[全局API-2.2]----Vue.extend构造器的延伸
Vue.extend构造器的延伸1.什么是Vue.extend?Vue.extend返回的是一个扩展实例构造器，也就是预防了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用扩展实例构造器来生产组件实例，并挂载到自定义元素上。 由于我们还没学习vue的自定义组件，所以我们先看跟组件无关的用...原创 2018-07-25 23:12:54 · 613 阅读 · 1 评论 -
VueJS----[全局API-2.1]----Vue.directive 自定义指令
Vue.directive 自定义指令1.什么是全局API全局API并不在构造器里，而是先声明全局变量或者在Vue上定义一些新的功能，vue内置了一些全局API，比如今天要说的Vue.directive，简单的来说就是在构造器外部用Vue提供给我们的 API函数来定义新的功能.2.Vue.directive自定义指令在上几篇文章中学习的 主要是Vue 的内部指令，我们也可以定义...原创 2018-07-25 22:48:24 · 865 阅读 · 0 评论 -
VueJS----[内部指令-1.7]----v-pre & v-cloak & v-once
v-pre &amp;amp; v-cloak &amp;amp; v-oncev-pre在模板中跳过vue的编译，直接输出原始值，意思就是在标签中加入v-pre会原样输出{{xxx}}，二不会输出data中的值v-cloak在vue渲染完指定的整个dom后才进行显示&amp;lt;div v-cloak&amp;gt; {{ message }}&amp;lt;/div&amp;g原创 2018-07-24 23:20:55 · 172 阅读 · 0 评论 -
VueJS----[内部指令-1.6]----v-bind
v-bindv-bind是处理html中的标签属性的，例如&amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;就是一个标签，&amp;lt;img&amp;gt;也是一个标签， 例如给Img标签绑定一个src html:&amp;lt;div id=&quot;app&quot;&amp;gt; &a原创 2018-07-24 23:14:30 · 135 阅读 · 0 评论 -
VueJS----[内部指令-1.5]----v-on：绑定事件监听器&v-model
v-on：绑定事件监听器&amp;v-modelv-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。v-on一、使用绑定事件监听器，编写一个加分减分的程序。 效果图 完整代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;原创 2018-07-23 23:43:19 · 1031 阅读 · 0 评论 -
VueJS----[内部指令-1.4]----v-text & v-html
v-text &amp; v-html我们已经可以在html中输出data中的值了，用的是{{xxx}}这种方式，但是这种方式是有弊端的，就是当我们网速很慢或者JavaScript出错的时候，会暴露我们的{{xxx}}。因此Vue给我们提供了v-text，就是解决这个问题的&lt;span&gt;{{ message }}&lt;/span&gt;=&lt;span v-text="原创 2018-07-23 23:28:26 · 169 阅读 · 0 评论 -
VueJS----[内部指令-1.3]----v-for指令 ：解决模板循环问题
v-for指令 ：解决模板循环问题v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。基本语法：&lt;li v-for="item in items"&gt; {{item}}&lt;/li&gt;js写法：var app=new Vue({ ...原创 2018-07-23 23:19:46 · 1274 阅读 · 0 评论 -
VueJS----[内部指令-1.1]----Helloworld
VueJS第一天—指令学习一、下载Vue2.0的两个版本： 官方网站：http://vuejs.org/ 开发版本：包含完整的警告和调试模式 生产版本：删除了警告，进行了压缩 二、项目结构搭建 用的是VSCode，微软的一款编辑软件，比较轻，个人比较喜欢 三、第一个程序—Helloworld ...原创 2018-07-23 22:54:29 · 153 阅读 · 0 评论 -
VueJS----[全局API-2.5]---Template模板
Template模板1. 直接写在选项里的模板直接在构造器里的template选项后编写。这种写法比较直观，但是如果模板html代码比较多，不建议这么些写<div id="app"> {{message}} </div>var app = new Vue({ el:'#app', data:{ ...原创 2018-08-25 23:49:34 · 291 阅读 · 0 评论