Vue学习总结
初识Vue
基本了解
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完全能够为复杂的单页应用提供驱动。
官网： Vue.js
HelloWord
我这边使用的是idea开发工具
1：下载vue.js https://cdn.jsdelivr.net/npm/vue/dist/vue.js
2：创建静态web项目
3：将vue.js导入项目
4：编写hello页面，引入vue.js
<script src="/js/vue/vue.js"></script>
5：启动服务器，显示效果
<!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>
讯享网
Vue常见指令
指令带有前缀 v-以表示它们是 Vue 提供的特殊 attribute
{ {属性}}
{ {}}
vue一直解析数据的指令
除了使用插值表达式{ {}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
v-bind:
表示通知vue在渲染的 DOM 标签时，将bind绑定的属性 和 Vue 实例data中同名属性值保持一致
<!--v-bind属性绑定--->
讯享网<!--v-bind属性绑定---> <div id="app"> <!--v-bind--> <span v-bind:title="title">看这里， 看这里</span> </div> <script> var vue = new Vue({ el:"#app", data:{ title:"瞅啥瞅~" } }) </script>
-----------------------------简写方式----------------------------------------------------------------------------------------- <!--v-bind属性绑定--->
<!--v-bind属性绑定---> <div id="app"> <!--v-bind--> <span :title="title">看这里， 看这里</span> </div> <script> var vue = new Vue({ el:"#app", data:{ title:"瞅啥瞅~" } }) </script>
绑定图片： v-bind:src 或者 :src
绑定样式： v-bind:class 或者 :class
绑定链接： v-bind:href 或者 :href
v-model
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
功能与v-bind类似， 不过数据可同步改动
讯享网<!--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:"dafei" } }) </script>
v-html
{ {属性}} 会原样输出数据属性，如果说数据是带有html格式的数据时，此时需要使用v-html指令
<div id="app" > {
{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
循环指令
普通数组:
<div id="app"> <ul> <li v-for="item in arr">{
{item}}</li> </ul> <!--带下标--> <ul> <li v-for="(item, index) in arr">{
{index}}-{
{item}}</li> </ul> </div> <script> var vue = new Vue({ el:"#app", data:{ arr:["a","b","c","d","d"] } }) </script>
对象集合:
讯享网<div id="app"> <ul> <li v-for="u in list"> {
{u.id}}-{
{u.name}}-{
{u.age}}-{
{u.sex==1?'男':'女'}} </li> </ul> </div> <script> var vue = new Vue({ el:"#app", data:{ list:[ {id:1,name:'dafei', age:18, sex:1}, {id:2,name:'xiaofei', age:17, sex:1}, {id:3,name:'huisiji', age:18, sex:0}, {id:4,name:'xiaoxue', age:19, sex:0} ] } }) </script>
v-on
事件绑定指令， 可缩写成@
比如： v-on:click //绑定点击事件， @click
Vue的事件
事件函数:
var vue = new Vue({ el:"#app", data:{ list:[ {id:1,name:'dafei', age:18, sex:1}, {id:2,name:'xiaofei', age:17, sex:1}, {id:3,name:'huisiji', age:18, sex:0}, {id:4,name:'xiaoxue', age:19, sex:0} ] }, methods:{ 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> methods:{ choseClick:function (e) { alert(1); } }
获取事件源
被触发事件的标签元素
讯享网 <ul> <li v-for="u in list" v-on:click="choseClick($event)"> {
{u.id}}-{
{u.name}}-{
{u.age}}-{
{u.sex==1?'男':'女'}} </li> </ul> methods:{ choseClick:function (e) { console.log(e.currentTarget); } }
事件传参
调用事件函数传入参数
<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); } }
Vue的属性
el
用来指示vue编译器从什么地方开始解析 vue的语法
<script> var vue = new Vue({ el:"#app", data:{ arr:[1,2,3]
讯享网 }, methods:{ fun1:function () { }, fun2:function () { } }, filters:{ dataFormat:function () { }, sexFilter:function (sex) { return sex == 0? '女':'男' } }, mounted:function () { console.log("执行数据初始化") } })
</script>
data
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
<script> var vue = new Vue({ el:"#app", data:{ arr:[1,2,3] }, methods:{ fun1:function () { }, fun2:function () { } }, filters:{ dataFormat:function () { }, sexFilter:function (sex) { return sex == 0? '女':'男' } }, mounted:function () { console.log("执行数据初始化") } }) </script>
methods:
讯享网放置页面中的业务逻辑，js函数一般都放置在methods中 <script> var vue = new Vue({ el:"#app", data:{ arr:[1,2,3] }, methods:{ fun1:function () { }, fun2:function () { } }, filters:{ dataFormat:function () { }, sexFilter:function (sex) { return sex == 0? '女':'男' } }, mounted:function () { console.log("执行数据初始化") } }) </script>
filters:
vue过滤器集合 <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> <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> var vue = new Vue({ el:"#app", data:{ arr:[1,2,3] }, methods:{ fun1:function () { }, fun2:function () { } }, filters:{ dataFormat:function () { }, sexFilter:function (sex) { return sex == 0? '女':'男' } }, mounted:function () { console.log("执行数据初始化") } }) </script> 全局： // 在创建 Vue 实例之前全局定义过滤器： Vue.filter('dataFormat', function (value) { return .... })
mounted:
是一个函数， 在vue实例创建完成后被立即调用（html加载完成后执行）
一般用处初始化data中的数据
讯享网 <script> var vue = new Vue({ el:"#app", data:{ arr:[1,2,3] }, methods:{ fun1:function () { }, fun2:function () { } }, filters:{ dataFormat:function () { }, sexFilter:function (sex) { return sex == 0? '女':'男' } }, mounted:function () { console.log("执行数据初始化") } }) </script>
综合案例:
员工crud
mabatis-plus项目改造
根据后端提供相应的接口实现页面的渲染
简单的Vue功能实现
查询页面
添加页面
修改页面代码实现
不多废话,觉得还不错的花点点收藏!
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/37566.html