vue笔记-前端开发_沃梦达教程

script src=https://unpkg.com/vue/dist/vue.js # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack Demo1 --《my-project》 # 这里需要进行一些配置...

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 更高的优先级。

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>
        <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.编码

在前台对地址进行两次编码 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>