![](https://img-blog.csdnimg.cn/a2626f0f16de46a6981dc3737286de21.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue基础
小威编程
学到很多东西的诀窍,就是一下子不要学很多。
展开
-
vue 路由和前端路由解析,vue-router基本使用,点击按钮跳转页面
首先先建两个测试用的页面什么是Vue路由?1.route 是一条路由,列如 Home 按钮=> home内容2.routes是路由组,把route组合起来,形成一个数组。[{Home按钮=>home 内容 },{About按钮=>About内容}]3.router 是一个机制,相当于一个管理者,它管理着路由,因为routes定义了一组数组路由,它放在哪里是静止的! router就控制这些路由,当请求来了就显示对应的页面。原创 2022-02-27 01:44:39 · 1014 阅读 · 0 评论 -
Vue生命周期(钩子函数)
借用官网的一句话就是:每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。Vue一共有10个生命周期函数,我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。把下面的代码运行到你的vue项目里面运行就知道生命周期的执行顺序! beforeCreate:function(){ console.log('1-beforeCrea原创 2022-02-24 22:03:02 · 72 阅读 · 0 评论 -
vue基础学习 指令 V-on
v-on是绑定事件(方法)的指令,v-on是单击效果的事件,原创 2022-02-24 16:27:43 · 828 阅读 · 0 评论 -
Vue 指令学习 基础 v-if&v-else&v-show
v-if:是vue 的一个内部指令,指令用在我们的html中。条件判断使用 v-if 指令v-if用来判断是否加载html的div,当v-if为true是div显示为false时v-else会显示v-else是和v-if一起用的原创 2022-02-24 01:29:05 · 386 阅读 · 0 评论 -
vue基础学习指令 v-bind
v-bind指令的作用是:为元素绑定属性完整写法是v-bind:属性名简写的话可以直接省略v-bind,只保留:属性名在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值,这个值是在vue构造器里的data属性中找到的。v-bind:属性名=表达式<div id="app"><img v-bind:src= "imgSrc" ></div>var app=new Vue({ el:'#app', ..原创 2022-02-24 17:11:14 · 210 阅读 · 0 评论 -
Vue基础学习 指令 v-text和v-html
我们通过{{变量}}这种方式,会在html中输出data中的值了,这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。这样让用户看见很不友好!Vue给我们提供的v-text,就是解决这个问题的下面的这两种方式可以达到一样的效果<span>{{ message }}</span>=<span v-text="message"></span><br/>v-html(不建议使用)原创 2022-02-24 16:00:10 · 220 阅读 · 0 评论 -
Vue基础学习 v-model指令
快速理解v-model 双向数据绑定原创 2022-02-24 16:46:33 · 96 阅读 · 0 评论 -
Vue :V-for指令
v-for指令:1.用于展示列表数据2.语法: v-for="(item,index) in xxx" : key="yyy"3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)<table > <tr > <td>编号</td> <td>姓名</td> <td>操作</td> </tr> &原创 2022-02-24 15:43:49 · 744 阅读 · 0 评论 -
vue脚手架(cli)项目搭建
vue脚手架(cli)项目搭建,保姆教程原创 2022-02-26 15:56:01 · 387 阅读 · 0 评论