查看: 116|回复: 1

浅谈Vue项目实战(页面渲染+事件绑定)

发表于 2018-7-9 13:43:12
本帖最后由 半夏花开 于 2018-7-9 14:02 编辑

页面渲染

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();   //这样挂载后这个方法会被直接调用。    },}


参考资料:http://www.makeru.com.cn/
web学习交流群:362513833



点评

海!外直播 t.cn/RxlBLRP 禁闻视频 t.cn/RJvO789 小人都想扮成君子,可见君子是受人尊重的;荡妇也想装成淑女,可见淑女是受人喜爱的;现在连朝鲜都想炫耀自己民主,可见...  发表于 2018-7-9 22:58


回复

使用道具 举报