前端 Vue-cli
前端 Vue-cli 基础知识与练习
Luemmy
这个作者很懒,什么都没留下…
展开
-
vuex: 状态管理/模块化/mutations常量
一. vuex状态管理/模块化/mutations常量[views/demo.vue]<template> <div class="demo"> <h1>vuex状态管理</h1> <p>{{count}}</p> <p>{{count1}}</p> <p>{{count2}}</p> <p>{{rootCount}}</p原创 2021-05-23 16:07:08 · 342 阅读 · 0 评论 -
vue-cli: 组件生命周期(组件的钩子函数)
一. 组件的钩子函数(组件生命周期)[生命周期表]<template> <div class="dome"> <h1>组件的钩子函数(生命周期)</h1> <div id="msg">{{ msg }}</div> <button @click="modify">修改</button> </div></template><script>原创 2021-05-23 16:06:35 · 368 阅读 · 0 评论 -
vue-cli: 路由与路由钩子函数
一. 路由与路由钩子函数组件部分[html]<template> <div class="dome"> <h1>路由 vue-router</h1> {{ $route.fullPath }} <div> <button @click="changPage">通过js切换路由</button> </div> <router-vi原创 2021-05-23 16:06:01 · 164 阅读 · 0 评论 -
vue-cli: v-model双向绑定 的用法
一. 双向绑定v-model<template> <div> <h1>双向绑定v-model</h1> <input type="text" v-model="text"> <div>{{ text }}</div> <textarea v-model="content" rows="4" cols="30"></textarea> <div>原创 2021-05-23 16:05:10 · 199 阅读 · 0 评论 -
vue-cli: 计算属性与侦听属性
一. 计算属性与侦听属性<template> <div> <h1>计算属性和侦听属性</h1> <!-- 表达式太复杂的话会导致模板难以维护, 而且如果多个地方使用该表达式的话会导致重复, --> <div> {{ type + ':' + msg }} </div> <!-- 使用computed计算属性 --> <div>{{ ty原创 2021-05-23 16:04:24 · 176 阅读 · 0 评论 -
vue-cli: 子组件与父组件通信、组件插槽slot(内容分发)、 动态组件
一. 子组件与父组件通信父组件向子组件传递参数, 子组件修改内容后, 向父组件返回内容<template> <div class="demo"><!-- <h1>子组件与父组件通信</h1>--><!-- <my-component--><!-- :text="content"--><!-- @on-callback="getData"--><!--原创 2021-05-20 18:43:49 · 224 阅读 · 0 评论 -
vue-cli: @开头的事件修饰符 的用法
一. 事件修饰符点击子组件, 也会认为点击了父组件, 即冒泡行为<template> <div> <h1>事件修饰符</h1> <div @click="fatherClick"> 父级 <div @click="subClick1">子级1</div> <!-- 阻止冒泡修饰符, 会阻止父级事件 --> <div @click.sto原创 2021-05-20 18:36:10 · 223 阅读 · 0 评论 -
vue-cli: v-on事件绑定 的用法
一. v-on事件绑定<template> <div> <h1>v-on 事件的绑定</h1> <div>{{number}}</div> <!-- 标准写法 --> <button v-on:click="add">加1</button> <!-- 简写 --> <button @click="reduce">减1<原创 2021-05-20 18:32:14 · 189 阅读 · 0 评论 -
vue-cli: v-for遍历数组 的用法
一. v-for格式: v-for=“xx in data” :key=“index”需要绑定唯一的keyin可以换成of当没有id的时候, 就要写成[v-for="(item, index) in data" :key=“index”]当有id的时候, 就可以写成[v-for=“item in data” :key=“item.id”]随机生成六位数 --> 生成随机数 Math.random() --> 取小数点后六位的一个数 .toFixed(6) --> 把0.替换成原创 2021-05-20 18:28:56 · 1605 阅读 · 1 评论 -
vue-cli: v-if条件判断 的用法
一. v-iftemplate(占位符)元素不会渲染到dom中<template> <div> <h1>v-if条件判断</h1> <!-- v-if --> <div v-if="isShow">isShow为true的时候才显示</div> <div v-else-if="isElse">isElse为true的时候才显示</div> <div原创 2021-05-20 18:26:09 · 443 阅读 · 0 评论 -
vue-cli: 绑定class和style
二. 绑定class和style<template> <div> <!-- 绑定一个class --> <div :class="classA">绑定class</div> <!-- 通过数组的方式绑定多个class --> <div :class="[classA, classB]">通过数组绑定多个class</div> <!-- 通过对象的方式来绑定cla原创 2021-05-20 18:20:28 · 240 阅读 · 0 评论 -
vue-cli: v-bind绑定数据 的用法
一. 绑定数据v-bind花括号{{ }}绑定数据花括号{{ }}里面可以写表达式v-bind绑定属性绑定动态属性<template> <div class="about"> <h1>数据绑定v-bind</h1> <!-- 花括号{{}}绑定数据 --> <p>{{ msg }}</p> <!-- 花括号{{}}里面可以写表达式 --> <di原创 2021-05-20 18:12:48 · 334 阅读 · 0 评论 -
vue-cli: 使用Vue-cli创建项目
一. Vue-cli 总体框架每次启动之前, 都要开启左下角的[npm], 双击里面的[serve]!之后点击第一个[Local]的链接二. Vue-cli 配置目录文件讲解1. node_modules library root (项目依赖包)[node_modules] 里面是项目依赖包,其中包括很多基础依赖,自己也可以根据需要安装其他依赖。安装方法打开命令工具,进入项目目录,输入npm install [依赖包名称],回车在两种情况下我们会自己去安装依赖:项目运行缺少该依赖包安装插件原创 2021-05-20 17:57:14 · 780 阅读 · 0 评论