浅谈Vue项目实战(页面渲染+事件绑定)
来源:互联网 发布:dnf战斗力查询 软件 编辑:程序博客网 时间:2024/06/05 10:36
前言:项目使用vue,记录搭建项目到上线心得,会一直跟新………
页面渲染
vue是不会去操作dom节点,是有数据去操控节点,在js文件数据都在data里
*js代码片*export default { data() { return { formInline: { user: 'admin', region: 'shanghai' } } }}*vue代码片**下面的标签是使用element ui搭建页面,和vue没毛关系,当成一般标签*<template> <el-row> <el-col :span="6"> <div class="grid-content bg-purple"> <el-form-item label="名称"> <el-input v-model="formInline.name"></el-input> </el-form-item> </div> </el-col> </el-row></template><script> import listJS from './list.js'; //引入上面的js文件 export default listJS; //在把它输出,便可以渲染页面</script>
vue数据渲染不只有这种方法,这是适合项目使用
渲染数据的方式个人经验
v-modle="formInline.name" 文本框渲染值v-html="formInline.name" 一般标签渲染<h2><span><div>等{{="formInline.name"}} 一般标签渲染<h2><span><div>等v-for 渲染列表v-bind:value 绑定value属性v-on:click 或者@click click事件(两种写法)v-modle:trim v-modle修饰符,去掉空格//例如渲染list list:[ {name:"zhang",age:"20",completed:true}, {name:"lisi",age:"21",completed:true}, {name:"longwu",age:"23",completed:true}, {name:"wangqi",age:"24",completed:true}, {name:"shang",age:"25",completed:true} ]<li v-for="(item,index) in list" > <input type="text" v-bind:value="item.name" v-bind:disabled="item.completed"/> <input type="text" v-bind:value="item.age" v-bind:disabled="item.completed"/> <button v-on:click="editItem(index)">编辑</button></li>item就是每一列数据,index索引值,在项目中编辑,删除使用。
数据渲染差不多就这样,在看看钩子函数
*js文件*export default{ //数据 data(){ return { dialogFormVisible: false, form: { id:"1", name: 'admin', region: 'beijing' }, } }, //事件方法 methods :{ editItem(index){ this.list[index].completed=false; } }, //挂载到实例之后加载,个人理解初始化渲染页面这里可以调用方法 mounted() { this.editItem(); //这样挂载后这个方法会被直接调用。 },}
阅读全文
0 0
- 浅谈Vue项目实战(页面渲染+事件绑定)
- 浅谈Vue项目实战(项目结构了解)
- vue之页面渲染
- 浅谈Vue(Vue项目搭建)
- vue 列表渲染双向绑定
- java项目实战-计算器(页面布局学习 添加事件)
- vue绑定点击事件
- vue绑定click事件
- vue事件绑定详解
- vue表单事件绑定
- vue 事件绑定 处理-
- vue.js,ajax渲染页面
- 浅谈Vue(使用vue+element ui搭建页面)
- 重写页面渲染事件
- 浅谈 Vue 项目优化
- 浅谈 Vue 项目优化
- 浅谈 Vue 项目优化
- 浅谈 Vue 项目优化
- 关于Google浏览器使用layer弹出层video标签播放视屏无法全屏播放问题
- 排序算法---最稳定的计数排序
- glut写的贪吃蛇
- LeetCode
- js-函数
- 浅谈Vue项目实战(页面渲染+事件绑定)
- 加载场景时调用的函数以及重新加载本场景
- Input.GetAxis
- 快速傅里叶变换FFT总结
- 调优神器VisualVM
- ABAP CALL DB Procedure demo
- ELK日志监控系统搭建
- 360打开网页默认为极速模式
- Android Mvp设计模式结合RxJava+OkHttp+retrofit浅谈