vue
关注
分享
扫一扫
文章平均质量分 60
洛神赋在csdn
这个作者很懒，什么都没留下…
展开
-
Vue入门 --- HelloWorld
<html><head><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript"> new Vue({ el: '#app', data: { message: 'Hello World!原创 2018-06-12 20:19:40 · 1153 阅读 · 0 评论 -
vue中路由的跳转和参数传递，参数获取
vue中的路由讲三点第一点：指令级别的路由<router-link>和程序级别的路由router.push();第二点：通过query和params传递参数和path和name之间的关系。第三点: $router和$route地区别声明：由于路由和传参和参数获取密切结合，所以将他们混合在一起讲解，最后会附加一个实例。html中通过<router-link>指令...原创 2018-07-31 13:42:37 · 45996 阅读 · 1 评论 -
Vue--事件处理修饰符
capture即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。 就是谁有该事件修饰符，就先触发谁。 例子如下:<html> <head> <title>Vue事件修饰符 capture</title> <script src="vue.js"></sc..转载 2018-07-25 21:17:59 · 487 阅读 · 0 评论 -
vue中的路由和时间修饰符 --- 联网的情况下直接可以运行
<html><body> <div id="app" style="border-bottom: 1px solid firebrick; margin-bottom: 20px"> <h1>{{ message }}</h1> <div style="border-bottom:原创 2018-07-25 21:09:23 · 473 阅读 · 0 评论 -
数据冻结Object.freeze冻结的时机
<html><head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body> <p id='node'> {{place}} &l原创 2018-06-30 10:03:44 · 3444 阅读 · 0 评论 -
vue中select实现单选
<html><head> <script src='js/vue.js'></script></head><body> <div id="example"> <select v-model='city'> <option value='西安'&am原创 2018-06-18 16:53:04 · 1666 阅读 · 0 评论 -
vue中使用select实现多选
<html><head> <script src='js/vue.js'></script></head><body> <div id="example"> <select v-model='workplaces' multiple> <optio原创 2018-06-18 16:50:15 · 21547 阅读 · 10 评论 -
vue中使用select元素实现单选radio的功能
<html><head> <script src='js/vue.js'></script></head><body> <div id="example"> <select v-model='city'> <option value='西安'&am原创 2018-06-18 16:17:00 · 2123 阅读 · 0 评论 -
Vue中的radio的使用方法
<html><head> <script src='js/vue.js'></script></head><body> <div id="example"> <input type='radio' id='wuhan' value='武汉' v-model='city'/&原创 2018-06-18 16:00:28 · 35949 阅读 · 4 评论 -
vue中checkbox组的使用
<html><head> <script src='js/vue.js'></script></head><body> <div id="example"> <input type='checkbox' id='china' value='china' v-model='coun原创 2018-06-18 15:20:05 · 5739 阅读 · 0 评论 -
计算属性
在模板中当一个属性的值依赖另一个属性时，采用计算属性。<html><head> <script src='js/vue.js'></script></head><body> <div id="example"> <input type='text' v-model='basePr原创 2018-06-18 14:55:05 · 1669 阅读 · 0 评论 -
如何实现v-for循环出来的列表里面的click事件只对当前列表内的元素有效
<!DOCTYPE html><html><head> <script type="text/javascript" src="js/vue.js"></script></head><body> <div id="app">原创 2018-06-16 21:00:57 · 9495 阅读 · 0 评论 -
v-model双向数据绑定
<!DOCTYPE html><html><head> <script src="js/vue.js"></script></head><body id="example"> <form> 姓名： <input type=&quo原创 2018-06-16 16:36:00 · 216 阅读 · 0 评论 -
v-if 和 v-else
v-else必须要和v-if匹配使用，v-else不能单独使用。只有v-if的值为false时，v-else模块才会显示出来。<!DOCTYPE html><html><head> <script src="js/vue.js"></script></head><body> <di原创 2018-06-16 15:52:35 · 19869 阅读 · 1 评论 -
v-if 和 v-show的比较
v-if指令根据表达式的值动态地插入或者移除DOM元素<!DOCTYPE html><html><head> <script src="js/vue.js"></script></head><body class="native"> <div id="原创 2018-06-16 15:36:51 · 175 阅读 · 0 评论 -
vue双向数据绑定
如果数据不是双向数据绑定而是单向数据绑定，那会怎么？而且这种单向是从模型到视图的单向。因此，当你更改了数据时，必须操作dom元素更新与之绑定的页数数据显示。但是，有了双向数据绑定后，就省略了手动更新数据这一步。你可以想一想双向数据绑定基于的技术是什么。不用任何想象力，你就应该猜得到那就是监听啊，监听啊，监听啊！<html><head><script type="tex...原创 2018-06-12 20:55:12 · 212 阅读 · 0 评论 -
父组件向子组件传递的属性发生改变时，子组件如何同步更新
父组件中的状态发生改变，子组件中的状态同步发生改变。处于同一父组件中的兄弟节点之间如何同步状态。留意watch，这是要点：父组件向子组件传递的属性发生改变时，子组件如何同步。<template> <div> <Man v-on:beliefChange="beliefChange" v-bind:belief="belief"><...原创 2019-02-27 20:55:41 · 6733 阅读 · 0 评论