![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
ChengYz_
瞎整
展开
-
Vue入门 - Class 与 Style 绑定
1 绑定class1.1 对象语法<div class="static" :class="{ active: isActive }"></div>可将对象绑定在class属性上,动态切换class 若isActive为true,则class插入active若isActive为false,则class移除activev-bind:class与普通class可共存。可绑定data中的对象,或计原创 2017-04-06 18:11:15 · 1183 阅读 · 0 评论 -
Vue入门 - 组件通信
1 父子组件通讯先触发子组件的mounted钩子,再触发父组件的mounted钩子。 1.1 子组件向父组件传递数据子组件中调用this.$emit([自定义事件:string],[传出数据])。父组件使用v-on监听自定义事件,子组件触发this.$emit时会自动触发。参考代码://parent component<template> <div v-on:childready=原创 2017-03-31 16:35:07 · 4654 阅读 · 0 评论 -
vue入门 - vue-cli
1 安装首先肯定得有nodejs,没有的话请移步。shell执行$ npm i vue-cli -g全局安装vue-cli。测试是否安装成功 $ vue -V(-V要大写,否则不识别),输出版本号则表示全局安装成功。 2 初始化项目执行$ vue init webpack my-project创建新项目。一路回车,后面会有测试、代码检查等工具,根据需要输入y/n然后回车。如果需要构建vue原创 2017-03-22 22:27:29 · 2342 阅读 · 0 评论 -
Vue入门 - 计算属性与watchers
1 计算属性data { computed:{ prop1:function(){ return this.message.split('').reverse().join('') } }}在dataset中定义computed选项来定义计算属性。prop1属性值依赖于message属性值,因此message发生变化时pr原创 2017-04-07 14:12:12 · 357 阅读 · 0 评论 -
Vue入门 - vue-router
1 简介及安装简介 vue-router是一个vue框架的路由管理包。 与ng的路由基本差不多,总体来说只需要记住两个标签<router-link>(路由导航)和<router-view>(路由插座)两个元素,然后逐渐扩展。安装 1. 直接下载/cdn方式,需先引入vue.js再引入vue-router.js 2. npm:npm i vue-router --save-dev。2 创建及配原创 2017-04-09 15:41:30 · 862 阅读 · 0 评论 -
vue 更改计算属性后select选中值不更改的解决方法
先上代码://...<body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <span>{{selected}}<原创 2017-03-25 21:46:49 · 9567 阅读 · 0 评论 -
Vue入门 - 自定义指令
1 自定义指令指令可以在全局或局部定义。组件是html和代码的复用,而指令是对DOM的扩展复用。1.1 全局自定义指令Vue.directive('mydirective',{ //各种指令钩子})在组件中使用时无需引用,直接使用v-mydirective即可。也可以先定义指令,再用Vue.ues()方法注册。var myDirective= {};myDirective.inst原创 2017-04-08 23:10:16 · 2262 阅读 · 0 评论 -
Vue入门 - 条件渲染与列表渲染
1 条件渲染条件渲染根据布尔值活表达式判断是否渲染。条件渲染有一下两类: v-if系列:值为true时插入dom,否则移除。v-show:节点保持在dom中,只是控制css的display属性。1.1 v-if系列v-if系列指令包括: 1. v-if 2. v-else 3. v-else-if<h1 v-if="name='A'">A</h1><h1 v-else-if="na原创 2017-04-07 22:50:29 · 3202 阅读 · 0 评论 -
Vue入门 - 模版语法与事件
1 插值1.1 文本使用双大括号{{ msg }}进行插值,表示将数据与DOM节点绑定。数据改变时,节点也相应改变。使用v-once执行一次性的插值,数据改变时插值内容不会更新。<span v-once>{{ msg }}</span>1.2 纯HTML原创 2017-04-06 16:26:11 · 488 阅读 · 0 评论