Vue学习
DF11G_0001
We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.
展开
-
Vue学习笔记(八)使用vue-cli建立todolist
todolist.vue中:<template> <div> <input v-model="inputValue"/> <button @click="handleSubmit">Go</button> <ul> <todo-item v-for="(item,index) of list" :key="index" :content=原创 2020-07-24 20:43:25 · 129 阅读 · 0 评论 -
Vue学习笔记(七)vue-cli
vue-cliVue CLI是用于快速Vue.js开发的完整系统,它提供:通过交互式项目脚手架@vue/cli。 通过@vue/cli+零配置快速原型@vue/cli-service-global。 运行时依赖项(@vue/cli-service): 可升级 建立在webpack之上,具有合理的默认值; 可通过项目内配置文件进行配置; 可通过插件扩展 丰富的官方插件集合,集成了前端生态系统中的最佳工具。 完整的图形用户界面,用于创建和管理Vue.js项目。vue-cli.原创 2020-07-22 22:57:33 · 144 阅读 · 0 评论 -
Vue学习笔记(六)建立一个todolist练习
一个简单的todolist我们将之前学过的知识进行汇总,写出一个简单的输入列表。效果如下。可以通过点击按钮为列表添加新的元素。<body> <div id="root">//添加双向数据绑定 <input v-model="inputValue"/>//为按钮添加点击事件 <button @click="handleClick">Go</button>//让表格显示数组中的各项内容原创 2020-07-18 16:27:33 · 175 阅读 · 0 评论 -
Vue学习笔记(五)v-if, v-show与v-for指令
目录v-if,v-show区别:v-forv-if,v-show用于是否显示当前文件节点区别:v-if从文件节点树直接删除该节点,而v-show则使用css的display属性选择是否显示。示例:<body> <div id="root"> <div v-if="isclick">SHOW OR NOT</div> <div v-show="isclick">SHOW O原创 2020-07-17 23:24:25 · 146 阅读 · 0 评论 -
Vue学习笔记(四)计算属性和侦听器
计算属性:当对data中的数据进行计算时,使用computed:属性进行计算。该属性将计算属性对应为一个函数,返回计算后的新数据。<body> <div id="root"> firstName:<input v-model="firstName"/> lastName:<input v-model="lastName"/> <div>{{fullName}}</div&g原创 2020-07-16 17:07:11 · 107 阅读 · 0 评论 -
Vue学习笔记(三)属性绑定和双向数据绑定
属性绑定通过v-bind属性将实例中的属性绑定到节点中。(简写为":"即可,也就是一个冒号就可以)<body> <div id="root"> <div v-bind:title="title">Hello World</div> </div> <script> new Vue({ el:"#root", data:{原创 2020-07-05 21:46:08 · 214 阅读 · 0 评论 -
Vue学习笔记(二)数据 事件 方法
数据<body> <div id=root> <h1>{{number}}</h1> </div> <script> new Vue({ el:"#root", data:{ msg:" World", number:123, }原创 2020-07-05 21:27:39 · 197 阅读 · 0 评论 -
Vue学习笔记(一)挂载点 模板 实例
Vue基本语法<body> <div id=root> </div> <script> new Vue({ el:"#root", template:'<h1>Hello{{msg}}</h1>', data:{ msg:" World" } })原创 2020-07-03 22:58:08 · 150 阅读 · 0 评论