vue笔记

<script src="https://unpkg.com/vue/dist/vue.js">
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack Demo1  --《my-project》
# 这里需要进行一些配置,默认回车即可
进入项目,安装并运行:
$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

cnpm install axios -S

 

<p v-if="seen">现在你看到我了</p>
<p v-else="seen">现在你看不到我了</p>
这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意,v-show 不支持 <template> 元素,也不支持 v-else。

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

<input type='checkbox' name='ids' value="value.chgId" v-model="value.ischecked">

v-model 指令将根据表达式 value.ischecked 的值的真假来选中/取消选中


jjjfxx数据变化触发,jjjfxx为data中数据,由于我是要观察jjjfxx.goodsObjArr中的ischecked的变化,将jjjfxx改为'jjjfxx.goodsObjArr'可以提高性能
 watch:{
      jjjfxx:{
//newName为改变后jjjfxx,oldName为改变前jjjfxx
        handler:function (newName,oldName) {  
          this.jkje=0;
          var arr= this.jjjfxx.goodsObjArr;
          for(var i=0;i<arr.length;i++){
            if(arr[i].ischecked)
            {
              this.jkje+=arr[i].chgAmt;
            }
          }
        },
//深度监听,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器
        deep:true   
    //immediate:true      //watch里声明jjjfxx后立即执行handler
      }
    }
 watch:{
      jjjfxx:function () {
          this.jkje=0;
          var arr= this.jjjfxx.goodsObjArr;
          for(var i=0;i<arr.length;i++){
            if(arr[i].ischecked)
            {
              this.jkje+=arr[i].chgAmt;
            }
    }
      }
    }


计算属性computed
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

 

radio,v-model="zfqd"被选中时,zfqd的值为value的值,
给组件添加 v-model 属性时,默认会把 value 作为组件的属性,然后把 'input' 值作为给组件绑定事件时的事件名
      <label class="paychan_way" for="ums"><input name="paychan" type="radio" v-model="zfqd" value="0" id="ums"><span>银联支付</span></label>
      <label class="paychan_way" for="ccb"><input name="paychan" type="radio" v-model="zfqd" value="1" id="ccb"><span>建行支付</span></label>


绑定class,引号中有大括号
        <tr class='jkdetail-tl ' align='center' v-bind:class="{hide:value.flag}"><td colspan='2'>单位编码</td><td colspan='2'>{{value.Tdwbm}}</td></tr>
        <tr class='jkdetail-tl ' align='center' v-bind:class="{hide:value.flag}"><td colspan='2'>单位名称</td><td colspan='2'>{{value.Tdwmc}}</td></tr>


动态组件切换效果
        <div class="schlist_tab" id="schoolnav">
          <span :class="firststyle" @click="toggleTabs(firstdzx)">大、中学</span>
           <span :class="secondstyle" @click="toggleTabs(secondxx)">小学</span>
          <span :class="thirdstyle" @click="toggleTabs(thirdyey)">幼儿园</span>
        </div>
   <component :is="currentView" keep-alive></component>
<script type="text/ecmascript-6">
  import firstdzx from '@/components/dwlist/firstdzx'
  import secondxx from '@/components/dwlist/secondxx'
  import thirdyey from '@/components/dwlist/thirdyey'
  export default {
    data () {
      return {
        firstdzx: 'firstdzx',
        secondxx: 'secondxx',
        thirdyey: 'thirdyey',
        currentView: 'firstdzx',
        firststyle:'schoolcur',
        secondstyle:'',
        thirdstyle:''
      }
    },
    components: {
      firstdzx,
      secondxx,
      thirdyey
    },
    methods: {
      toggleTabs (tabText) {
        this.currentView = tabText
      }
    }
  }
</script>


this.$nextTick为当前页面加载完成运行document.getElementById("chinapaysubmit").submit();

this.$nextTick(() => {
                   document.getElementById("chinapaysubmit").submit();
                })

 

select中得到选中的值,selectValue在data中注册
<select name="hptype" id="hptype" class="hptype" v-on:change="indexSelect($event)">
        <option value="0">大型汽车</option><!--style="color:#757575;"-->
        <option value="1" selected="selected">小型汽车</option>
        <option value="2">使馆汽车</option>
</select>

 methods: {
        indexSelect(event){
         this.selectValue=event.target.value;
        }
}

 

返回当前 URL 的查询部分(问号 ? 之后的部分)。
var urlParameters = location.search;

 

下拉选择器数据传递
<template>
    <div>
        <select v-model="select" >
            <option v-for="(a,index) in arr" :key="index" :value="a.id">{{ a.name }}</option>
        </select>
        <p>您选择的名字的Id是:{{select}}</p>
    </div>
</template>

1.编码

Js

在前台对地址进行两次编码 encodeURIComponent(encodeURIComponent(message))

2.解码

Java

在后台使用URLDecoder.decode(request.getParameter("name"), "UTF-8");解码


表单提交
document.forms['exportServlet'].submit();
(1)document.forms:表示获取当前页面的所有表单
(2)document.forms[0]:表示获取当前页面的第一个表单
(3)document.forms['exportServlet']:表示获取当前页面的name="exportServlet"的表单
(4)submit()表示提交函数

 

 

vue打包部署到tomcat
每个月一次的技术文档是一个总结的过程,今天就来讲讲我最近遇到的vue项目打包部署到服务端的注意事项及步骤。

 1我们用vue-cli脚手架建一个项目之后,在本地测试都没有问题,但是直接用npm run build打包,访问基本都是有问题,比如:页面出现空白现象,获取资源路径不对等,我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题,我也遇到过,那现在我们就来一一解决这样的问题。

出现的问题:

打包到服务器后,出现资源引用路径的问题

打包到服务器后,出现空白页的问题

打包到服务器后,出现引入的css的type被拦截转换为"text/plain"问题

打包到服务器后,出现路由刷新404的问题

此时我们需要以下几步

1配置服务端地址

有一个很尴尬的问题就是config/prod.env.js目录中要配置服务端的地址,我在网上搜了很多都没有提到这一步,我只配置了dev.env.js中的地址BASE_API:'"http://192.168.1.144:8081"',之前一直读取的是本地的开发环境,我一直在想从哪里获取呢,后来在prod.env.js配置后发现会打包后会自动读取路径。

这两个文件有什么不同呢?Dev.env.js是本地开发环境中会调用的服务端配置地址,但是prod.env.js是打包时会自动读取里面的服务端地址,先知道了有什么不同,才会了解为什么在这里面配置

2修改config下index.js的配置

修改build:{}中内容,assetsPublicPath: '/ywyun/',// '/' '

首先build是打包时会读取的模块,该这里是打包时会自动加一个文件夹名为ywyun,因为我们打包后悔变成index.html和dist文件夹,这两个东西部署的时候肯定是要放在一个文件夹内,至于这个文件夹文字是什么,根据你们自己的项目名字或者路径来定义。

这个解决的是出现资源引用路径的问题。

3出现由于前面项目加了个基目录,ywyn,访问出现404的问题

今天做的应用发布到服务器上,发现当刷新当前路由的时候,就会出现404的状况,其实这是因为当刷新当前页面时候,所需要访问的资源在服务器上找不到,也就是说,我们在Vue发应用的过程中,设置路由的路径不是真实存在的路径,并且使用了history模式。解决方案是在router/index.js下加一个base路径,因为在部署的时候有一个文件夹,这个文件夹相当于一个基目录,路由没有这一层的话会报错,

export default new Router({
  mode: 'history',
  base:'/ywyun/',
  routes: constantRourerMap
})

4页面刷新时出现404问题

此时访问页面应该基本的都可以跳转,但是刷新的时候突然发现报了404,这个在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释

根据官方给出的解决方案原理

你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

所以在tomcat服务器下你可以这么做。在打包好的项目根目录下新建一个WEB-INF文件夹,在WEB-INF中写一个web.xml。

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee

           http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

  version="3.1" metadata-complete="true">

  <display-name>Router for Tomcat</display-name>

  <error-page>

    <error-code>404</error-code>

    <location>/index.html</location>

  </error-page>

</web-app>

这样的目的就是一旦出现404就返回到 index.html 页面。

 

以上所述是给大家介绍的Vue项目webpack打包部署到Tomcat或者阿里云服务器遇到的一系列问题,基本上这几个点改了,在本地用tomcat试一下,然后可以直接上传到阿里云上部署测试了。

 

当style标签具有该scoped属性时,其CSS将仅应用于当前组件的元素

vue组件集
https://zhuanlan.zhihu.com/p/31751243

上一篇:小清新卡通人物404单页源码


下一篇:一个jeecg框架的Java项目,tomcat中安装war包总是出现404错误的原因