vue相关
vue入门
- 下载vue.js
- 创建静态web项目
- 将vue.js导入项目
- 编写hello页面,引入vue.js查看效果
<head>
<meta charset="UTF-8">
<title>hello-vue</title>
<script src="/js/vue/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
常见指令
- {{属性}}:常规的取值方式,只在和vue关联的标签中有效,对应上面绑定了id='app'的div标签中才有效
- v-bind:表示通知vue在渲染的DOM标签时，将bind绑定的属性和Vue实例data中同名属性值保持一致(也就是绑定数据),可以简写成(:)
<div id="app">
<!--v-bind-->
<span v-bind:title="testTitle">看这里，看这里</span>
<!--下面这种写法是一个意思-->
<span :title="testTitle">看这里，看这里</span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
testTitle:"瞅啥瞅~"
}
})
</script>
- v-model:双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
功能与v-bind类似,不过数据可同步改动,即修改标签中的元素数,对应的Vue实例对象中data对应的数据也会发生变化
- v-html:按照html的格式进行取值
<div id="app" >
<!--这种直接取出来的数据是带有span标签的-->
{{content}}
</div>
<!--v-html(这种取出来是不带标签的):将html格式数据渲染出来-->
<div id="app" v-html="content">
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
content:"<span style='color: red;'>这是内容</span>"
}
})
</script>
- v-if判断指令
<!--age是否大于18，等于18，小于18-->
<div id="app">
<span v-if="age > 18">成年了</span>
<span v-else-if="age < 18">未成年</span>
<span v-else="age == 18">踩线了</span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
age:18
}
})
</script>
- v-for:循环指令
<body>
<ul id="app">
<!--<li>a</li>
<li>b</li>
<li>c</li>-->
<li v-for="item in arrs">{{item}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:['aa','bb','cc']
}
})
</script>
</body>
- 对象集合
<body>
<ul id="app">
<!--(item,index)前面的是元素,后面的是元素顺序,这是固定的位置,不能更改-->
<li v-for="(item,index) in arrs">{{index}}-{{item.name}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
{id:1,name:'zs',age:18},
{id:2,name:'ls',age:19},
{id:3,name:'ww',age:20}
]
}
})
</script>
</body>
- v-on:事件绑定,可简写成@,如v-on:click //绑定点击事件-->(@click注意了,这里的@后面是没有冒号的)
<body>
<ul id="app">
<!--(item,index)前面的是元素,后面的是元素顺序,这是固定的位置,不能更改-->
<!--$event:表示事件信息封装对象,写法是固定的,这里表示的就是z整个事件对象,-->
<li v-on:click="choseClick($event)" v-for="(item,index) in arrs">{{index}}-{{item.name}}</li>
<!--以下写法与上面的效果一样-->
<!--<li @click="choseClick" v-for="(item,index) in arrs">{{index}}-{{item.name}}</li>-->
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
{id:1,name:'zs',age:18},
{id:2,name:'ls',age:19},
{id:3,name:'ww',age:20}
]
},
methods:{
//这个就是事件函数
choseClick:function (ev) {
//拿到事件对象
console.log(ev);
//获取当前的事件元素(也就是当前项目中的li元素)
console.log(ev.currentTarget);
alert(11);
}
}
})
</script>
</body>
- 事件传参
<ul>
<li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
{{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
</li>
</ul>
methods:{
choseClick:function (e, id, name) {
console.log(e.currentTarget, id, name);
}
}
属性
- el:用来指定编译器从什么地方开始解析语法(可以简单理解为将Vue实例对象绑定在页面的那个标签上的)
- data:用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
- methods:放置页面中的业务逻辑，js函数一般都放置在methods中(可以简单理解为存放自定义方法的方法区)
- filters:过滤器集合,专门存放过滤器的
<body>
<ul id="app">
<li v-for="(item,index) in arrs">
{{index}}-{{item.name}}-{{item.sex | sexFilter}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
{id:1,name:'zs',age:18,sex:1},
{id:2,name:'ls',age:19,sex:0},
{id:3,name:'ww',age:20,sex:-1}
]
},
filters:{
dataFormat:function () {
//多用来做数据格式转换
},
sexFilter:function (sex) {
if (sex == 0){
return '女'
}else if(sex == 1){
return '男'
}else {
return '保密'
}
}
}
})
</script>
</body>
- mounted:是一个函数,在Vue实例对象创建时调用,也就是data之前,常用来初始化data中的数据
<body>
<ul id="app">
<li v-for="(item,index) in arrs">
{{index}}-{{item.name}}-{{item.sex}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
/*{id:1,name:'zs',age:18,sex:1},
{id:2,name:'ls',age:19,sex:0},
{id:3,name:'ww',age:20,sex:-1}*/
]
},
mounted:function () {
console.log('先执行了吧');
let _this = this;
//模拟请求获取数据
$.get('/data/employ-data.json',function (data) {
console.log(data);
_this.arrs = data;
})
}
})
</script>
</body>
前后端项目分离相关问题
- 在后端服务器配置类里面配置跨域的Bean,解决跨域问题
//跨域访问时要配置这里
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
//重写父类提供的跨域请求处理的接口
public void addCorsMappings(CorsRegistry registry) {
//添加映射路径
registry.addMapping("/**")
//放行哪些原始域
//.allowedOrigins("*")
/*这里要配置下新版版的,上面这个allowedOrigins是老版本的,会报错*/
.allowedOriginPatterns("*")
//是否发送Cookie信息
.allowCredentials(true)
//放行哪些原始域(请求方式)
.allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
//放行哪些原始域(头部信息)
.allowedHeaders("*")
//暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
.exposedHeaders("Header1", "Header2");
}
};
}
- 在html页面获取url上的参数
<script>
//获取url上的请求参数
function getParams() {
//获取问号及问号后面的内容
var url = window.location.search;
var params = new Object();
if (url.indexOf("?") != -1) {
//截取问号后面的内容,再使用&分割多个属性
//从第1个开始截取,因为第0个是?
var arr = url.substr(1).split("&");
for (var i = 0; i < arr.length; i++) {
//使用=分割为keyvalue
var keyValue = arr[i].split("=");
params[keyValue[0]] = keyValue[1];
}
}
return params;
}
</script>
网友评论