vue学习篇：渲染前端页面

最新推荐文章于 2023-07-26 17:45:58 发布
最新推荐文章于 2023-07-26 17:45:58 发布
阅读量344 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_num1/article/details/88947722
版权 
<!doctype html>
<html>

<head>
   <meta charset="UTF-8">
   <title></title>
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
   <link href="/public/WeChat/survey/css/mui.min.css" rel="stylesheet" />
   <link href="/public/WeChat/survey/css/common.css" rel="stylesheet" />
   <style type="text/css">
      [v-cloak] {
         display: none;
      }
      .right-btn{
         width: 1.22em;
         height: 1.22em;
      }
      .questions .right-btn img{
         width: 16px;
         height: 16px;
      }
      /*.right-btn input[type=radio]{*/
         /*background-image: url(/public/WeChat/survey/img/radio.png);*/
      /*}*/
      .right-btn input[type=radio]:checked.checkeds{
         background-image: url(/public/WeChat/survey/img/radio-check.png);
      }
      /*.right-btn input[type=checkbox]{*/
         /*background-image: url(/public/WeChat/survey/img/checkbox.png);*/
      /*}*/
      .right-btn input[type=checkbox]:checked.checkeds{
         background-image: url(/public/WeChat/survey/img/checkbox-checked.png);
      }
   </style>
</head>

<body>
<div id="app" v-cloak>
   <nav class="mui-bar mui-bar-tab box-flex align-center bottom">
      <div class="flex-1 box-flex flex-column">
         <div class="mui-text-center">
            <img src="/public/WeChat/survey/img/all-hover.png" />
         </div>
         <div class="all mui-text-center" v-cloak>
            {{curPage}}/{{total}}
         </div>
      </div>
      <div class="flex-1">
         <div class="up mui-text-center" @tap="up">
            <img src="/public/WeChat/survey/img/back.png" />
         </div>
      </div>
      <div class="flex-1" v-if="curPage<total">
         <div class="down mui-text-center" @tap="next">
            <img src="/public/WeChat/survey/img/next.png" />
         </div>
      </div>
      <div class="flex-1 box-flex flex-column" v-if="curPage===total">
         <div class="mui-text-center">
            <img src="/public/WeChat/survey/img/save.png" />
         </div>
         <div class="all mui-text-center" @tap="submits">
            提交
         </div>
      </div>
   </nav>
   <div class="lists mui-content" >
      <div class="mui-card m-t-m test" v-for="(item, index) in list">
         <div class="title">
            <span class="num">{{index+1}}.</span>
            <span class="type" v-if="item.sc_id_first">{{item.sc_id_first}}<b v-if="item.sc_id_second">&bull;{{item.sc_id_second}}</b></span>
            <span class="info flex-1">{{item.sui_name}}
                  <span v-if="item.sui_type === '0' ">(单选题)</span>
                  <span v-if="item.sui_type === '1' ">(多选题)</span>
                  <span v-if="item.sui_type === '2' ">(开放题)</span>
                  <span v-if="item.sui_type === '3' ">(输入题)</span>
               </span>
         </div>
         <div class="questions" v-if="item.sui_type === '0'" :key="item.sui_id">
            <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item,item1)" v-if="item.sui_type === '0' " v-for="(item1,index1) in item.sui_keys" :key="index1">
               <div class="flex-1" >
                  <span class="num" v-if="index1+1 === 1 ">A</span>
                  <span class="num" v-if="index1+1 === 2 ">B</span>
                  <span class="num" v-if="index1+1 === 3 ">C</span>
                  <span class="num" v-if="index1+1 === 4 ">D</span>
                  <span class="num" v-if="index1+1 === 5 ">E</span>
                  <span class="num" v-if="index1+1 === 6 ">F</span>
                  <span class="num" v-if="index1+1 === 7 ">G</span>
                  : {{item1.itemname}}
               </div>
               <div class="right-btn" v-if="item.value.indexOf(item1.value)>0">
                  <input  type="radio"  :name="'radios'+item.sui_id" class="question_s" checked v-bind:value="item1.value">
               </div>
               <div class="right-btn" v-else>
                  <input  type="radio"  :name="'radios'+item.sui_id"  class="question_s" v-bind:value="item1.value">
               </div>
            </div>
         </div>
         <div class="questions" v-if="item.sui_type === '1'" :key="item.sui_id">
            <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item,item1)"  v-for="(item1,index1) in item.sui_keys"  :key="index1">
               <div class="flex-1" >
                  <span class="num" v-if="index1+1 === 1 ">A</span>
                  <span class="num" v-if="index1+1 === 2 ">B</span>
                  <span class="num" v-if="index1+1 === 3 ">C</span>
                  <span class="num" v-if="index1+1 === 4 ">D</span>
                  <span class="num" v-if="index1+1 === 5 ">E</span>
                  <span class="num" v-if="index1+1 === 6 ">F</span>
                  <span class="num" v-if="index1+1 === 7 ">G</span>
                  : {{item1.itemname}}
               </div>
               <div class="right-btn" v-if="item.value.indexOf(item1.value)>0">
                  <input  type="checkbox"  :name="'checkboxs'+item.sui_id"  value='0' class="question_s" checked v-bind:value="item1.value">
               </div>
               <div class="right-btn" v-else>
                  <input  type="checkbox"  :name="'checkboxs'+item.sui_id"  class="question_s" v-bind:value="item1.value">
               </div>
            </div>
         </div>
         <div class="questions" v-if="item.sui_type === '2'" :key="item.sui_id">
            <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item,item1)"  v-for="(item1,index1) in item.sui_keys" :key="index1">
               <div class="flex-1" >
                  <span class="num" v-if="index1+1 === 1 ">A</span>
                  <span class="num" v-if="index1+1 === 2 ">B</span>
                  <span class="num" v-if="index1+1 === 3 ">C</span>
                  <span class="num" v-if="index1+1 === 4 ">D</span>
                  <span class="num" v-if="index1+1 === 5 ">E</span>
                  <span class="num" v-if="index1+1 === 6 ">F</span>
                  <span class="num" v-if="index1+1 === 7 ">G</span>
                  : {{item1.itemname}}
               </div>
               <div class="right-btn" v-if="item.value.indexOf(item1.value)>0">
                  <input  type="radio"  :name="'radios'+item.sui_id" class="question_s" checked v-bind:value="item1.value">
               </div>
               <div class="right-btn" v-else>
                  <input  type="radio"  :name="'radios'+item.sui_id"  class="question_s" v-bind:value="item1.value">
               </div>
            </div>
            <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item)">
               <div class="flex-1 box-flex align-center">
                  <div class="num">其它</div>
                  <div class="flex-1 text">
                     <input type="text" placeholder="请输入" v-bind:value="item.value_text" v-on:blur.lazy="inputFun($event,item)" />
                  </div>
               </div>
            </div>
         </div>
         <div class="questions" v-if="item.sui_type === '3'">
            <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item)">
               <div class="flex-1 box-flex align-center">
                  <div class="flex-1 text">
                     <textarea type="text" placeholder="请输入" rows="5" v-bind:value="item.sd_value_text" v-on:blur.lazy="inputFun($event,item)"></textarea>
                  </div>
               </div>
            </div>
         </div>
      </div>

   </div>
</div>
<script src="/public/WeChat/survey/js/mui.js"></script>
<script src="/public/WeChat/survey/js/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script type="text/javascript">
   var self;
    var post_url="{:U('surveyDonePage')}";
    var app = new Vue({
        el: "#app",
        data: {
            curPage: {$p},
            total:{$pages},
            count:{$count},
            list: {$list},
            su_id:{$su_id},
            c_id:{$c_id},
            s_id:{$s_id},
         id:'',
            value:'',
            value_text:'',

        },
        methods: {
            up() {
                if(this.curPage <= 1) {

                } else {
                    this.curPage--;
                    this.$options.methods.getDatas();
                }
            },
            next() {
                if(this.curPage < this.total) {
                    this.curPage++;
                    this.$options.methods.getDatas();
                } else {

                }
            },
            inputFun(e,item){
                if(e.target.value!='' && item.id!=''){
                    var post_url="{:U('surveyDoneSubmit')}";
                    var params = new URLSearchParams();
                    params.append('value_text',e.target.value);
                    params.append('id', item.id);
                    // 获取下一页的数据
                    axios.post(post_url, params, {emulateJSON: true}).then(function (response) {
                        var datalist = response.data.status;
                        if (datalist>0) {
                           // console.log(response.data.msg);
                        } else {
                            console.log(response.data.msg);
                        }
                    })
                        .catch(function (error) {
                            console.log(error);
                        });
            }
            },
            inputClick(e, item) {
                e.currentTarget.querySelector('input').click();//选中
                var questionchoseInputs = e.currentTarget.parentElement.querySelectorAll('input.question_s');
                var choseVal = '';
                for (var i = 0, j = questionchoseInputs.length; i < j; i++) {
                    if (questionchoseInputs[i].checked) {
                        choseVal = choseVal + questionchoseInputs[i].value + ',';
                    }
                }
                if (choseVal.length > 0 &&  item.id.length>0 || item.sui_type===1) {
                    choseVal = choseVal.substr(0, choseVal.length - 1);
                    var post_url="{:U('surveyDoneSubmit')}";
                    var params = new URLSearchParams();
                    params.append('value',choseVal);
                    params.append('id', item.id);
                    // 获取下一页的数据
                    axios.post(post_url, params, {emulateJSON: true}).then(function (response) {
                        var datalist = response.data.status;
                        if (datalist>0) {
                            console.log(response.data.msg);
                        } else {
                            console.log(response.data.msg);
                        }
                    })
                        .catch(function (error) {
                            console.log(error);
                        });
                }


            },
            getDatas:function(){
                var params = new URLSearchParams();
                params.append('su_id',self.su_id);
                params.append('c_id', self.c_id);
                params.append('p', self.curPage);
                // 获取下一页的数据
                axios.get(post_url+'?su_id='+self.su_id+'&c_id='+self.c_id+'&p='+self.curPage).then(function (response) {
                    var datalist = JSON.parse(response.data.data);//将json字符串转换成json对象
                    if (datalist.length > 0) {
                        self.list = datalist;
                        console.log(response.data.msg);
                    } else {
                        console.log(response.data.msg);
                    }
                })
                    .catch(function (error) {
                        console.log(error);
                    });
         }
            ,
            submits() {
                this.showDd = false;
                var title={
                    text:'提交试卷 ',
                    class:''
                };
                var btnArray = [{
                    name:'取消',
                    class:'btn-cancel'
                },{
                    name:'确认',
                    class:'btn-confirm'
                }];
                mui.confirm('是否提交问卷？', title, btnArray, function(e) {
                    if(e.index == 1) {
                        var params = new URLSearchParams();
                        params.append('su_id',self.su_id);
                        params.append('s_id', self.s_id);
                        params.append('c_id', self.c_id);
                        axios.post("{:U('surveySubmit')}", params, {emulateJSON: true}).then(function (response) {
                            var datalist = response.data.status;
                            if (datalist > 0) {
                                this.showDd = false;
                                var btnArray = [{
                                    name: '确定',
                                    class: 'btn-default-mini',
                                    parentClass:'bc-white'
                                }];
                                var title = {
                                    text: '  ',
                                    class: 'inner-title bc-white'
                                };
                                mui.confirm(response.data.msg, title, btnArray, function(e) {
                                    if(e.index == 0) {
                                        window.location = '{:U("Evaluate/evaluate")}';
                                    }
                                })
                            } else {
                                this.showDd = false;
                                var btnArray = [{
                                    name: '确定',
                                    class: 'btn-default-mini',
                                    parentClass:'bc-white'
                                }];
                                var title = {
                                    text: '  ',
                                    class: 'inner-title bc-white'
                                };
                                mui.confirm(response.data.msg, title, btnArray, function(e) {
                                })
                            }
                        })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }
                });
            }
        },
        created:function() {
            self = this;//必须重新定义，否则无法定位
        }
    })
</script>
</body>

</html>
Jack_num1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE的单页应用渲染过程以及核心概念（待补充）
H2279202642的博客
05-31 744
VUE的出现和渲染过程 服务端渲染 最开始的页面渲染其实是服务端渲染的，浏览器将一个静态网页得模板发给服务端，服务端通过静态网也的模板开始渲染动态页面，最后浏览器接收到服务端渲染成功后的页。 （如下图） 前后端分离 直到后端工程师的工作压力大到一定的程度的时候，渲染动态页面的工作最终由前端工程师操手。 其流程为前端写好程序代码，发送到服务端，服务端只会发送一个空白的html回来给浏览器，浏览器会开始解析css，js代码，并开始渲染页面，若需要获取各种业务数据，会向服务端继续发送ajax请求，服务端
Vue开发资源：vue相关的开发杂记-前端开发
最新发布
05-07
本资源包中的"Vue-dev-note-master1"可能包含了关于Vue开发的笔记、教程、示例代码等资料，对于想要深入理解和学习Vue.js的开发者来说，是一份宝贵的资源。 1. **Vue核心概念**： - **虚拟DOM**：Vue通过虚拟DOM...
Vue页面渲染
前端视听
05-24 815
写了那么多，最终的数据都是要展示在前端的界面，才算是完成工作。 Element UI手册：https://cloud.tencent.com/developer/doc/1270 中文文档：http://element-cn.eleme.io/#/zh-CN github地址：https://github.com/ElemeFE/element 其实步骤很简单，代码如下 <template...
Vue 渲染流程详解
m0_55333789的博客
07-26 2818
Vue 渲染流程详解
Vue3核心源码解析第三课 组件渲染前的初始化过程
fegus的博客
07-12 1046
Vue.js 3.0 允许我们在编写组件的时候添加一个 setup 启动函数，它是 Composition API 逻辑组织的入口，本节课我们就来分析一下这个函数。我们先通过一段代码认识它，在这里编写一个 button 组件： 可以看到，这段代码和 Vue.js 2.x 组件的写法相比，多了一个 setup 启动函数，另外组件中也没有定义 props、data、computed 这些 options。在 setup 函数内部，定义了一个响应式对象 state，它是通过 reactive API 创建的。st
Vue 页面渲染的流程
zz130428的博客
01-01 5967
在Vue核心中除了响应式原理外，视图渲染也是重中之重。我们都知道每次更新数据，都会走视图渲染的逻辑，而这当中牵扯的逻辑也是十分繁琐。本文主要解析的是初始化视图渲染流程，你将会了解到从挂载组件开始，Vue是如何构建VNode，又是如何将VNode转为真实节点并挂载到页面。初始化调用$mount挂载组件。_render开始构建VNode，核心方法为，一般会创建普通的VNode，遇到组件就创建组件类型的VNode，否则就是未知标签的VNode，构建完成传递给_update。patch阶段根据VNode。
写给vue新手们的vue渲染页面教程
08-29
总之，Vue.js 提供了一种优雅的方式来进行前端页面渲染，它的简单性和灵活性使得它成为许多开发者首选的框架。希望这个教程能帮助到Vue新手们，让你在学习过程中少走弯路，更快地掌握Vue页面渲染的精髓。在实践中...
frontcore:基于Vue的服务器端渲染前端原型
05-23
服务器端渲染前端原型 目录 什么是frontcore？ frontcore是一种前端开发/原型设计工具，旨在降低部署过程中与后端系统集成的成本，并使我们的开发堆栈现代化。 它试图通过将服务器端渲染工作流程集成到前端开发过程...
前端Vue资源包：包含代码、课件、依赖包、静态资源等
06-21
学习Vue2时，建议先从基础开始，理解Vue实例、指令、组件和生命周期等核心概念，然后深入学习Vuex和Vue Router，最后再探索更高级的主题如服务器端渲染、性能优化等。 8. **实践项目**： 实践是掌握任何技术的...
vue.js,ajax渲染页面的实例
10-18
Vue.js 是一套构建用户界面的...通过以上实例，我们可以看到Vue.js结合Ajax在实际开发中的应用，它能够使得前端页面的动态数据展示变得简单高效。同时，理解Vue.js核心概念和编程模式对于开发高质量的Vue应用至关重要。
Vue 首页秒开实践指南
小生方勤
12-15 337
一前端性能优化一直是衡量一个团队和一个前端的各方面水平，呈现快速的加载，是给人最直观，成就感也最足的一个感受，而且对用户体验是第一重要的概念，所以这个相当重要，现就来结合美团的实践方案来...
vue页面的渲染过程
qq_44969643的博客
11-11 1万+
本文主要介绍Vue页面的渲染过程 首先vue会找到webpack的打包配置文件。在build/webpack.base.conf.js下：在这里，定义了vue的程序入口文件 vue加载时文件的执行顺序 执行index.html文件 执行main.js文件 main.js挂载了app.vue文件，用app.vue的templete替换index.html中的 main.js中注入了路由文件，将对应的组件渲染到router-view中 router-view中加载Layout文件 Layout 加载N
Vue小网页（使用vue将网页进行渲染）
成长过程
07-03 1037
本文用到以下三个包，若需要尝试本文的vue网页，请自行下载 其中是设置了表格的边框、宽度等一系列操作，若想自行写那么可以不导该包 该包是对进行了一个，若不需要格式化，也可以不用下载 必导，请到官网自行下载（下面有简单的教程，若还是不会请留言或者私信） 点击此链接或者上面的官网可跳入Vue.js官网...
vue修改数据页面不重新渲染
热门推荐
jerryyang_2017的博客
09-06 5万+
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下： &amp;lt;template v-for=&quot;item in tableData&quot;&amp;gt; &amp;lt;div :class=&quot;{'redBorder':item.red}&quot;&amp;gt; &amp;lt;div&amp;gt;{{ it
vue在页面渲染出来前显示{{变量名}}怎么办用 v-cloak
weixin_43099985的博客
12-25 5565
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; [v-cloak]{
Nuxt.js的使用、vue项目不被百度收录怎么办、seo优化问题
LingHuzh的博客
01-04 5435
我们在上一篇博文中介绍了vue项目不被百度收录的根源和介绍了两种解决方案也具体说了预渲染的使用方法，今天说一下另一种解决方案Nuxt.js的使用。 还不了解vue为什么不被百度收录或预渲染怎么使用的童鞋们建议点下面链接了解下 vue项目不被百度收录怎么办、seo优化问题/预渲染的具体使用 Nuxt.js介绍、Nuxt.js 是什么？： Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染 我们的目标是创建一.
解决vue在渲染页面之前可以看到源代码的问题
weixin_42307129的博客
11-26 3946
  在css里加上一段下面的代码 ,虽然这样可以解决这个问题但是会带来另外的问题就是原生js的一些方法会出现一些问题比如offwidth,offheight等等这些方法获取被v-cloak的子元素宽高宽这些会是0px 因为子元素会把v-cloak 的display继承过来但是在css无法看到display:none这个属性也无法改变，会导致js 认为该元素可见域为0px ,要是在项目中确实要...
处理vue渲染前的显示问题
xw丶
09-07 5144
添加css [v-cloak] { display: none;} 给vue对象加上v-cloak div v-cloak> {{ message }}div>
vue面试精华：前端框架必备知识点
本资源是一份名为"vue面试题-前端程序员必备-前端框架-大厂面试准备.docx"的文档，专为前端...这份文档是前端开发者面试准备的宝贵参考资料，无论是在个人学习还是实际项目中，都可以帮助提升Vue框架的理解和应用能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值