Vue入门
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，
Vue 也完全能够为复杂的单页应用提供驱动。
简单的vue版"Holle Vue"
-
下载vue.js
https://cdn.jsdelivr.net/npm/vue/dist/vue.js有网状态下我们直接在需要用到vue框架的html的head标签之间添加
-
创建静态web项目
-
将vue.js导入项目
-
编写hello页面，引入vue.js
- 启动服务器，显示效果
<!DOCTYPE html>
<html lang="en">
<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>
常见指令
-
{{属性}} : 解析数据的指令，使用插值表达式**{{}}**进行数据渲染
-
v-bind：绑定属性 如v-bind:src,v-bind:class,v-bind:href等，可以简写成一个“ : ” 如 :src , :class , :href
<!--v-bind属性绑定---> <div id="app"> <!--v-bind--> <span v-bind:title="title">原来的长这样</span> <span :title="title">简写的呦</span> </div> <script> var vue = new Vue({ el:"#app", data:{ title:"是阿浔~" } }) </script> -
v-model ：双向数据绑定，绑定数据功能跟v-bind是一样的， 区别在如果html属性值改变， vue的data数据也会变动（双向）
<!--model双向绑定---> <div id="app"> <!--v-bind: 表示数据单项绑定，可以给html标签属性绑定参数，如果html属性值改变，vue中data数据值不会变动 --> v-bind：<input type="text" name="username" v-bind:value="username"> <!--v-model:表示双向绑定，绑定数据功能跟v-bind是一样的， 区别在如果htmle属性值改变， vue的data数据也会变动--> v-model:<input type="text" name="username" v-model:value="username"> <br> <span>{{username}}</span> </div> <script> var vue = new Vue({ el:"#app", data:{ username:"axun" } }) </script> -
v-html ：数据是带有html格式的数据时，此时需要使用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">18禁</span> <span v-else="age == 18">有点纠结</span> </div> <script> var vue = new Vue({ el:"#app", data:{ age:18 } }) </script> -
v-for : 循环指令
<div id="app"> <ul> <!--带索引 --> <li v-for="(item,index) in arr">{{index+1}}--{{item}}</li> </ul> </div> <script> var vue = new Vue({ el:"#app", data:{ arr:["啊","吧","吃","的"] } }); </script> -
v-on : 事件绑定指令， 可缩写成@
比如：
v-on:click//绑定点击事件， @click //简写方式 <input type="text" name="username" v-on:click="函数名()"> <input type="text" name="username" @click="函数名()">
事件
-
事件函数
var vue = new Vue({ //事件函数写在methods里 methods:{ //格式 --> 事件名:function([参数1]...){ ... } choseClick : function () { alert(1); }, changeSelect : function(){ alert(2); } } }) -
事件对象
<!--$event 事件对象--> <ul> <li v-for="u in list" v-on:click="choseClick($event)"> {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}} </li> </ul> -
事件源
<!--被触发事件的标签元素--> <!--事件对象的currentTarget获取事件源--> <ul> <li v-for="u 是一个函数， 在vue实例创建过程中被调用（html加载完成后执行） 一般用处初始化data中的数据是一个函数， 在vue实例创建过程中被调用（html加载完成后执行） 一般用处初始化data中的数据in list" v-on:click="choseClick($event)"> {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}} </li> </ul> <script> var vue = new Vue({ methods:{ choseClick:function (e) { console.log(e.currentTarget); } } }) </script> -
事件参数 : JavaScript传参数一样
属性
- el : 指定vue编译器从哪个元素哪个地方解析 ,如下代码的 el:"#app"
- data : 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
- methods : 放置页面中的业务逻辑，js函数一般都放置在methods中
- filters : vue过滤器集合
- **mounted ** : 是一个函数， 在vue实例创建过程中被调用（html加载完成后执行)一般用处初始化data中的数据(经常使用到)
<ul>
<li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
{{u.id}}-{{u.name}}-{{u.age}}-{{u.sex | sexFilter}}
</li>
</ul>
<script>
Vue.filter('sexFilter', function (sex) {
if (sex==1){
return "男";
} else if(sex==0){
return "女";
}else{
return "妖"
}
})
var vue = new Vue({
el:"#app",
data:{
arr:[1,2,3]
},
methods:{
fun1:function () {
},
fun2:function () {
}
},
filters:{
sexFilter:function (sex) {
if (sex==1){
return "男";
} else if(sex==0){
return "女";
}else{
return "妖1"
}
}
},
mounted:function () {
console.log("执行数据初始化")
}
})
</script>
生命周期
请求跨域
//细节:发送ajax的链接的端口号需要与后端服务器的端口号一样
//步骤1：接口启动类App.java中跨域访问配置
//跨域访问
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
//重写父类提供的跨域请求处理的接口
public void addCorsMappings(CorsRegistry registry) {
//添加映射路径
registry.addMapping("/**")
//放行哪些原始域
.allowedOrigins("*")
//是否发送Cookie信息
.allowCredentials(true)
//放行哪些原始域(请求方式)
.allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
//放行哪些原始域(头部信息)
.allowedHeaders("*")
//暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
.exposedHeaders("Header1", "Header2");
}
};
}
获取路径(url)上的参数
//获取url上的请求参数
function getParams() {
//获取问号及问号后面的内容
var url = window.location.search;
var params = new Object();
if (url.indexOf("?") != -1) {
//截取问号后面的内容,再使用&分割多个属性
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;
}
扫一扫
8332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
