![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习
自足的猿
能否自律一点,实在是太懒啦
展开
-
前端 Vue框架学习实例(十)
1.组件可以访问Vue实例的数据吗?组件是一个单独功能的模块的封装,有属于自己的HTML模板,也有属于自己的dataVue.component('cpn',{template:'#cpn',//分离写法data(){ //data是一个函数return{title:'abc'}}...原创 2021-07-30 15:48:19 · 161 阅读 · 0 评论 -
前端 Vue框架学习实例(九)
1.组件的注册创建组件构造器 Vue.extend() 注册组件 Vue.component() 使用组件<body> <div id="app"> <!-- 3.使用组件 --> <my-cpn></my-cpn> <my-cpn></my-cpn> ...原创 2021-07-28 22:09:05 · 129 阅读 · 0 评论 -
前端 Vue框架学习实例(八)
1.v-model双向绑定的基本使用在表单控件或者组件上创建双向绑定<body> <div id="app"> <!-- <input type="text" v-model="message"> --> <input type="text" v-bind:value="message" v-on:input="valueChange"> <h2>{{message}}.原创 2021-07-12 21:42:52 · 101 阅读 · 0 评论 -
前端 Vue框架学习实例(七)
对于前一段时间学习的阶段练习,实现一个书籍购物车的例子。最终效果有数据时:没有数据时:思路:1.写出页面基本结构以及css样式2.v-for="(item,index)inbooks将数据绑定3.给按钮+、按钮-、以及移除按钮添加动作4.计算总价格5.判断是否有数据HTML页面<div id="app"> <div v-if="books.length"> <ta...原创 2021-07-11 20:27:55 · 152 阅读 · 0 评论 -
前端 Vue框架学习实例(六)
1.事件监听v-on的基本使用 语法糖的写法@。。。实现一个简单计数器。<body> <div id="app"> <h2>{{message}}</h2> <button @click="increment">+</button> <button @click="decrement">-</button> </div&g...原创 2021-07-06 22:53:29 · 345 阅读 · 0 评论 -
前端 Vue框架学习实例(五)
1.计算属性的基本运用计算属性关键词:computed。计算属性在处理一些复杂逻辑时是很有用的。例子:使用计算属性计算出商品的总价格<body> <div id="app"> <h2>总价格:{{totalPrice}}</h2> </div> <script> const app = new Vue({ el: "#app", .原创 2021-07-06 22:04:27 · 97 阅读 · 0 评论 -
前端 Vue框架学习实例(四)
1.使用v-bind绑定style<h2:style="{css属性名:值}">{{message}}</h2><body> <div id="app"> <!-- <h2 :style="{css属性名:值}">{{message}}</h2> --> <!-- <h2 :style="{fontSize:size}">{{message}}</h.原创 2021-07-05 23:32:18 · 158 阅读 · 2 评论 -
前端 Vue框架学习实例(三)
1.v-html指令使用html指令可以输出html代码在<h2>标签中间输出一个<a>标签<body> <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script> const app = new Vue({原创 2021-07-05 21:40:04 · 70 阅读 · 0 评论 -
前端 Vue框架学习实例(二)
边上班边学,学的磨磨唧唧,每次听的时候感觉秒懂,以为自己行了,可是没过几天啥都忘了,抽个时间把学的内容做一个回顾把。真是人间废物!1.最简单的{{}}Mustache语法Mustache 标签将会被替代为对应数据对象上的值。无论何时,绑定的数据对象上发生了改变,插值处的内容都会更新。这是数据绑定最常见的形式<body> <div id="app1"> <h2>{{message}}</h2> <h原创 2021-07-05 21:26:33 · 219 阅读 · 0 评论 -
前端 Vue框架学习实例(一)
1.初识Vue框架 Vue是一种前端原创 2021-06-02 22:24:04 · 332 阅读 · 0 评论