<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