vue学习
vue
hudongdongjava
这个作者很懒,什么都没留下…
展开
-
10、组件component
组件复用<div id="app"> <!--组件复用--> <div> <button-counter></button-counter> <button-counter></button-counter> </div> </div> <script> var data = { }; <!--data必原创 2020-12-16 16:54:56 · 128 阅读 · 0 评论 -
9、表单
文本<div id="app"> <!--文本框--> <div> <input v-model="message" placeholder="edit me"/> <p>message={{message}}</p> </div> </div> <script type="text/javascript"> var data = { mess原创 2020-12-15 11:55:28 · 63 阅读 · 0 评论 -
8、事件处理
事件修饰符vue为v-on提供了事件修饰符,事件修饰符是以点为开头的指令后缀来表示的,如下.stop.prevent.capture.self.once.passive示例:<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><原创 2020-12-14 10:53:28 · 66 阅读 · 0 评论 -
6、style和class绑定
style示例:<body> <div id="app"> <div v-bind:style="styleObejct">style</div> <div v-bind:style="{color:'red', fontSize:'20px'}">style2</div> </div> <script> var data = { styl原创 2020-12-12 11:29:10 · 65 阅读 · 0 评论 -
5、计算属性computed
computedcomputed是一种基于响应式依赖进行缓存的。示例:<body> <div id="app" v-bind:title="message"> <div>{{random2}}</div> <div>{{random2}}</div> <div>{{random()}}</div> <div>{{random()}}</div> <原创 2020-12-11 15:14:58 · 118 阅读 · 0 评论 -
4、模板语法
渲染文本默认情况下,修改变量的值元素里面的变量值也会随之更改,比如<div id="app"> <div>{{message}}</div> </div> <script> var data = { message:"hello vue" }; var vm = new Vue({ "el":"#app", data:data }); vm.message =原创 2020-12-11 14:49:36 · 65 阅读 · 0 评论 -
3、vue的生命周期
原创 2020-12-11 13:50:12 · 46 阅读 · 0 评论 -
2、监视watch
监视属性通过watch属性可以监视指定变量的变化<body> <div id="app"> <div v-bind:title="message">{{message}}</div> </div> <script> var data = { message:"hello vue" }; var vue = new Vue({ el:"#app", data:data原创 2020-12-11 12:00:09 · 83 阅读 · 0 评论 -
1、Vue的创建及基本使用
变量渲染使用"{{}}"来引入变量。<div id="app"> <div>{{message}}</div></div><script> var data = { message:"hello vue" }; var vue = new Vue({ el:"#app", data:data });</script>元素绑定v-bind通过v-bind:attributeName可以绑定元素的at原创 2020-12-11 11:40:52 · 58 阅读 · 0 评论