
Vue
一支海棠
这个作者很懒,什么都没留下…
展开
-
node.js 服务器启动 vue脚手架启动
node.js 服务器启动命令npm start || yarn start启动成功的标志端口号就在 bin/www文件查看 或更改端口号127.0.0.1:3000 默认本机的地址构建好的项目 可以直接用 yarn start 启动 前提是你全局安装了 yarn关于 node 建议看 你用什么构建 就用什么启动但是 我试了一下 你用 yarn 构建的项目 npm run serve 启动也是ok的同样 npm 构建的 用 yarn serve 也能启动 但是速度要稍微慢一点原创 2021-05-30 11:09:14 · 445 阅读 · 0 评论 -
Vue v-model 侦听器 watch
v-model<h3>{{message}}</h3> <!-- 1.v-bind value的绑定 2.监听input事件, 更新message的值 --> <input type="text" :value="message" @input="inputChange"> <!-- v-model 像是 上面的语法糖 --> <input type="text" v-mode原创 2021-05-30 10:31:59 · 1429 阅读 · 0 评论 -
methods computed
1 差值语法<template id="tem"> <h2>{{firstName+" "+lastName }}</h2> <h2>{{score >= 60 ? '及格':'不及格'}}</h2> <h2>{{message.split(" ").reverse().join(" ")}}</h2> </template>data(){原创 2021-05-29 21:45:20 · 68 阅读 · 0 评论 -
Vue列表渲染 :key值 加不加的 diff算法
v-for 渲染v-for=“(item,index) of [数组]”{{item}}v-for=“(item,index) in [数组]”{{item}}<h2>遍历数字</h2> <ul> <li v-for="(value,index) in 10">{{index}}-----{{value}}</li> </ul> <h2>遍历原创 2021-05-29 21:39:30 · 133 阅读 · 0 评论 -
Vue 条件渲染
条件渲染<template id="tem"> <h2 v-if="isshow">hahahah </h2> <button @click="change"></button> </template><input type="text" v-model="score"> <h2 v-if="score > 90">优秀</h2>原创 2021-05-29 21:31:38 · 100 阅读 · 0 评论 -
Vue v-bind v-on
Vue v-bind基本使用 <!-- vue3允许 template 中有多个根元素 --> <template id="tem"> <!-- v-bind 基本使用 --> <img v-bind:src="imgUrl" alt=""> <a v-bind:href="link">baidu </a> <!-- 语法糖 简写 -->原创 2021-05-29 21:15:06 · 91 阅读 · 0 评论 -
Vue 基本指令
mustache//在 vue3.0中 template 可以直接使用标签 不需要在外层 加div<template id="tem"> <!--1 mustache 基本使用 --> <h2>{{message}}</h2> <!--2 表达式 --> <h2>{{count*10}}</h2> &原创 2021-05-19 15:20:02 · 81 阅读 · 0 评论 -
Vue-template
temmplate 模板使用1 这两种写法几乎一致 只是是否简写 const demo ={ template:'<div> <h2>hello </h2></div> ' } const app = Vue.createApp(demo); app.mount("#app") Vue.createApp({ template:`<h2>hello vue3</h2>原创 2021-05-19 15:02:30 · 287 阅读 · 0 评论 -
Vue-router
Vue Router路由是有两种模式history模式 历史记录 /xxx/xxx/xx RESTful跟后台对接接口的一种形式要使用这种模式必须后台配合hash模式 锚点 #xxxconst router = new VueRouter({ mode:'history', routes})目录构建views页面级的组件components小组件、公用的组件// 路由跳转 <router-link tag="button原创 2021-05-17 18:00:31 · 89 阅读 · 0 评论 -
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能使用在安装项目的时候直接配置目录中|-src|-storeindex.js vuex的配置文件加入你的项目已经建好了突然想用vu原创 2021-05-17 16:44:40 · 83 阅读 · 0 评论 -
Vue EventBus事件总线
在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件使用1 初始化 创建 js文件import Vue from 'vue'var Event = new Vue();export default Event;2 发送事件//引入 Eevent 模块import Event from '../../public/event'Event.$emit('Component1','msg')3.接收//引入 E原创 2021-05-17 15:19:12 · 170 阅读 · 0 评论 -
Vue脚手架
官网地址https://cli.vuejs.org/zh/guide/installation.html通过脚手架创建一个项目 1、找到你想创建项目的目录 2、在地址栏输入cmd 回车 3、vue create 项目名称(不要用中文) 选择 1、default 2.x 2、default 3.x 3、自己选择 √ 上下键选择 回车确定 空格多选 1、选择vue的版本 2、ba原创 2021-04-19 14:39:45 · 128 阅读 · 0 评论 -
Vue 组件
全局组件在 new Vue 之前全局组件定义了 任何vue中都可以使用以下为 定义全局组件 并在两个 vue中使用<div id="app"> <Com1></Com1> </div> <div id="app1"> <Com1></Com1> </div> //全局组件 在 new Vue 之前 // 全局原创 2021-04-19 14:37:12 · 84 阅读 · 0 评论 -
Vue基础2
事件v-on:不加on的事件名@不加on的事件名如果传值可以加括号 事件对象 不传值的时候默认接收 传值的时候需要单独再去传$event .stop 阻止冒泡 .prevent 阻止浏览器默认事件 .键码 .单词class和style:class="{class名:真假值}":class="[真假?‘class名’:’’]":class="[class1]":style="{width:变量}:style="js原创 2021-04-19 14:06:17 · 66 阅读 · 0 评论