Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，
Vue 也完全能够为复杂的单页应用提供驱动。
Vue项目开始之前要把相关的插件跟问价导入进来,引用文件的时候还要注意路径的问题,项目中如果遇到了404,那就是文件的路径引用不对,或者是项目配置的时候路径没配置好
Vue常见指令
属性
{{}}
vue一直解析数据的指令
v-bind
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
v-bind: 表示通知vue在渲染的 DOM 标签时，将bind绑定的属性 和 Vue 实例data中同名属性值保持一致,在引用的时候可以直接使用" : "也可以
<div id="app">
<span v-bind:title="title">{{message}}</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
title : '咋滴'
}
})
</script>v-model
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
功能与v-bind类似， 不过数据可同步改动
<div id="app">
<input v-model:value="message" name="name" type="text">
{{message}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
title : '咋滴'
}
})
</script>v-html
{{属性}} 会原样输出数据属性，如果说数据是带有html格式的数据时，此时需要使用v-html指令
<div id="app1">
<input v-model:value="message" name="name" type="text">
{{message}}
</div>
<div id="app" >
<div v-html="input"></div>
<div v-html="app"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
title : '咋滴',
app:"<span style='color: rebeccapurple'>哈哈哈</span>",
input:"<input type='number' name='name' value='33'>"
}
})
</script>v-if
判断指令
<div id="app">
<span v-if="age<18">18禁</span>
<span v-else-if="age>18">欢迎光临</span>
<span v-else="age==18">刚刚好</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
age : '11'
}
})
</script>v-for&vue事件
<div id="app">
<!--事件
1.事件源
2.事件函数
3.事件对象
4.事件对象参数-->
<ul>
<li v-for="item in arr" v-on:click="me($event,item)">{{item.name}}--{{item.age}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
age : '11',
arr:[{id:1,name:"Alex",age:12},
{id:2,name:"jack",age:13},
{id:3,name:"ben",age:14}]
},
methods:{
me:function (e,item) {
// alert("被点击")
console.log(e);//事件对象
console.log(e.target);//事件源
console.log(item.name);//事件参数
}
}
})
</script>v-on
事件绑定指令， 可缩写成@
比如：
v-on:click //绑定点击事件，
@click
<form id="formId">
<input type="hidden" name="id">
名称：<input type="text" name="name"><br>
年龄：<input type="text" name="age"><br>
<input type="button" id="btn" @click="submitForm()" value="提交"/>
</form>
<script>
var app = new Vue({
el:"#formId",
data : {
},
methods : {
submitForm:function () {
$.post("",$('#formId').serialize(),function (data) {
if (data.code === 200) {
window.location.href='index.html';
}else {
alert(data.msg);
}
})
}
}
});
</script>Vue的属性
el
用来指示vue编译器从什么地方开始解析 vue的语法
data
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中,s试图里面的数据来源就是data
methods
这个可以说就是方法的集合,上面什么时候需要用到函数方法,就需要在这里面去调用
<input type="button" id="btn" @click="submitForm()" value="提交"/>
<script>
var app = new Vue({
el:"#formId",
data : { },
methods : {
submitForm:function () {
$.post("",$('#formId').serialize(),function (data) {
if (data.code === 200) {
window.location.href='index.html';
}else {
alert(data.msg);
}
})
}
}
});mounted
这个是一个函数**， 在vue实例创建完成后被立即调用（html加载完成后执行）,
filters
vue过滤器集合
<div id="app">
<ul>
<li v-for="item in emp">{{item.name}}--{{item.id}}--{{item.sex | sexChange}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
emp:[{id:1,name:"hhh",sex:0},
{id:2,name:"hhh",sex:1},
{id:3,name:"hhh",sex:3}]
},
filters: {
sexChange: function (value) {
if (value == 0) {
return "女";
} else if (value == 1) {
return "男";
} else {
return "保密";
}
}
}
});
</script>Vue生命周期
请求跨域
同部请求异步请求
Vue注意事项
标签内调用任何属性data里面的属性时候,可以直接使用属性名字即可,如果是地址类型的属性字符串需要用单引号引起来,然后加上数据
返回数据,前端有没有判断返回值code
