【总结归纳2】Javaweb之Vue的使用

阿白白白白白白

已于 2022-07-31 21:33:15 修改

阅读量1k

点赞数 1

分类专栏： javaweb 文章标签： vue.js 前端 javascript

于 2022-07-31 21:21:41 首次发布

本文链接：https://blog.csdn.net/weixin_45905080/article/details/126090128

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

VUE

基于MVVM思想，实现双向数据绑定
● 双向绑定是指当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。

mvc：

单项数据绑定——>页面可以改变数据库，数据库不可以改变页面

操作过程

新建 HTML 页面，引入 Vue.js文件
在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
el: "#app",
data() {
return {
username: ""
}
}
});

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data ：用来定义数据模型
methods ：用来定义函数。这个我们在后面就会用到
3. 编写视图

<div id="app">
<input name="username" v-model="username" >
{{username}}
</div>

{{}} 是 Vue 中定义的插值表达式，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

Vue指令

在这里插入图片描述
● v-bind:
该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化

<a v-bind:href="url">百度一下</a>
简写成 v-bind  换成 ：
<a :href="url">百度一下</a>

● v-model
该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果

<input name="username" v-model="username">

● v-on
v-on:后面的事件名称是之前原生事件属性名去掉on

单击事件 ： 事件属性名是 onclick，而在vue中使用是 v-on:click
失去焦点事件：事件属性名是 onblur，而在vue中使用时 v-on:blur
<input type="button" value="一个按钮" v-on:click="show()">
简写成  v-on 换成 @
 <input type="button" value="一个按钮" @click="show()">

● v-show与v-if区别
v-show不展示的原理是给对应的标签添加 displaycss属性，并将该属性值设置为 none，达到隐藏的效果。
v-if指令是条件不满足时根本就不会渲染
● v-for
需要循环那个标签，v-for 指令就写在那个标签上

<标签 v-for="变量名 in 集合模型数据">
{{变量名}}
</标签>

<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
{{索引变量 + 1}} {{变量名}}
</标签>

生命周期

8个阶段：对应8个方法，每触发一个生命周期事件，会自动执行该生命周期方法（即钩子方法）
在这里插入图片描述

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/vue.js"></script>

</head>
<body>
<!--视图v-model变——>模型name变——>差值script中data的name也变-->
<!-- vue指令：v-model；v-bind的简写：加冒号；v-on的简写：加@；v-if；v-else；v-show-->
<!-- vue指令：v-bind的简写：加冒号；v-on的简写：加@-->
<div id="app">
  <!--v-model:进行双向绑定;将此输入框和下面的模型name相绑定-->
  <input v-model="name">
  {{name}}  <!--  差值表达式：{{}}-->

  <input v-model="url">
  <a v-bind:href="url">点击</a>

  <font v-bind:color="ccc">123</font>

<!--  进行v-bind的简写-->
  <a :href="url">简写绑定</a>

<!--  绑定一个按钮进行onclick方法的绑定-->
  <button v-on:click="fun()">方法</button>


  <input v-model="pass">
  <div v-if="pass==1">1</div>
  <div v-if="pass==2">2</div>
  <div v-if="pass==3">3</div>
  <div v-if="pass==4">4</div>


  <input v-model="pass1">
  <div v-if="pass1==1">if</div>
  <div v-else-if="pass1==2">elseif</div>
  <div v-else="">else</div>

<!--show有个隐藏属性：当pass2非10时，就不显示内容-->
  <input v-model="pass2">
  <div v-show="pass2==10">show</div>


<!--  v-for: 第一个值a:循环变量；第二个值i：数组下标；arr：数组名;{{a}}:差值表达式，在页面显示a的值-->
  <div v-for="a in arr">{{a}}</div>
  <div v-for="(a,i) in arr">{{i+1}}------{{a}}</div>

  <div v-model="obj.age1">{{obj.age1}}</div>

  <div v-show="bo">哈哈哈哈哈哈</div>
</div>



<script>
  //创建vue
  new Vue({
    el:"#app", //写明控制范围，body中的div是控制
    data(){   //模型区，方便记忆理解，称为模型区
      return{
        pass:"",
        pass1:"",
        pass2:"",
        name:"2222", //此处可以设置默认值
        url:"https://www.baidu.com", //通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据

        ccc:"pink",

        arr:["xc","cxf","zym","scf"],
        obj:{
          name1:"",
          age1:"1999",
        },

        bo:true

      }
    },
    methods:{  //方法区，可以获得模型的数据
      fun(){
        alert(this.name)
      }
    },
    //生命周期方法（钩子方法）:无需调用，自动执行
    mounted(){ //挂载完成
      alert("页面加载完毕")

    },
    destroyed(){ //销毁完毕
      alert("关")
    }


  })

</script>
</body>
</html>