自足的猿-优快云博客

原创前端 Vue框架学习实例（十）

1.组件可以访问Vue实例的数据吗？组件是一个单独功能的模块的封装，有属于自己的HTML模板，也有属于自己的data Vue.component('cpn',{ template:'#cpn',//分离写法 data(){ //data是一个函数 return{ title:'abc' } } ...

2021-07-30 15:48:19 204

原创前端 Vue框架学习实例（九）

1.组件的注册创建组件构造器 Vue.extend() 注册组件 Vue.component() 使用组件 <body> <div id="app">  <my-cpn></my-cpn> <my-cpn></my-cpn> ...

2021-07-28 22:09:05 185

原创前端 Vue框架学习实例（八）

1.v-model双向绑定的基本使用在表单控件或者组件上创建双向绑定 <body> <div id="app">  <input type="text" v-bind:value="message" v-on:input="valueChange"> <h2>{{message}}.

2021-07-12 21:42:52 145

原创前端 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 209

原创前端 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 409

原创前端 Vue框架学习实例（五）

1.计算属性的基本运用计算属性关键词:computed。计算属性在处理一些复杂逻辑时是很有用的。例子：使用计算属性计算出商品的总价格 <body> <div id="app"> <h2>总价格：{{totalPrice}}</h2> </div> <script> const app = new Vue({ el: "#app", .

2021-07-06 22:04:27 155

原创前端 Vue框架学习实例（四）

1.使用v-bind绑定style <h2:style="{css属性名：值}">{{message}}</h2> <body> <div id="app">  <!-- <h2 :style="{fontSize:size}">{{message}}</h.

2021-07-05 23:32:18 213 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 127

边上班边学，学的磨磨唧唧，每次听的时候感觉秒懂，以为自己行了，可是没过几天啥都忘了，抽个时间把学的内容做一个回顾把。真是人间废物！ 1.最简单的{{}}Mustache语法 Mustache 标签将会被替代为对应数据对象上的值。无论何时，绑定的数据对象上发生了改变，插值处的内容都会更新。这是数据绑定最常见的形式 <body> <div id="app1"> <h2>{{message}}</h2> <h

2021-07-05 21:26:33 274

原创前端 Vue框架学习实例（一）

1.初识Vue框架 Vue是一种前端

2021-06-02 22:24:04 392

zhshuzi的博客