Vue笔记

最新推荐文章于 2023-10-05 16:53:19 发布

原创最新推荐文章于 2023-10-05 16:53:19 发布 · 479 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Vue.js的基本使用，包括如何搭建Vue环境，数据模型的设置与更新，以及DOM操作如插值表达式、属性绑定、条件渲染和列表渲染。此外，还涉及到了事件驱动和属性监听，展示了Vue的响应式系统和生命周期的概念。

Vue

在特定场景下，遇到特定问题，需要套用固定的解决方案去解决。

Vue为JavaScript的框架

1.框架的HelloWord

1.对Vue框架搭建一下

a.将框架代码，引入到网页内

		<script src="Vue.js"></script>

b.设置一个区域(Vue要操作的区域)

<div id="app"></div>

c.在这个区域的下方，创建Script标签，new Vue()对象

<script>
    new Vue();
</script>

d.给Vue对象传递一个JS对象(通过{}方式创建的js对象)

<script>
    new Vue({
        "el":"#app",//el是选择Vue可操作的区域
        "data":{},//设置数据模型
        "methods":{}
    });
</script>

2.功能实现

a.设置数据模型

"data":{
    "msg":"div的内存"
},//设置数据模型

b.将Vue对象中的数据模型和网页的标签做一个绑定关系

<div id="div01">{{msg}}</div> 插值表达式

c.当你想要操作div中的内容时，都可以转换操作msg

在元素上绑定事件

<input type="button" value="获得div中的内容" @click="getText" />
<input type="button" value="设置div中的内容" @click="setText" />

在Vue对象的method里面创建函数

"methods":{
    "getText":function (){
        alert(this.msg)
    },


    "setText":function (){
        this.msg = "Vue设置的新值"
    }
}

2.声明式渲染

3.Vue操作了标签体（双标签中的内容）

插值表达式:{{数据模型的key值}}

4.Vue可以操作属性值

1.单向绑定 (修改数据模型 html页面同步效果但是用户修改html属性值，数据模型不随之改变)

语法：v-bing:原属性名=“数据模型的key值”

案例：

数据模型：

"data":{
    "msg":"div内容",
    "username":"admin"
},

HTML代码：

<input type="text" v-bind:value="username"/>

简写：:原属性名=“数据模型的key值”

2.双向绑定

语法：v-model:原属性名=“数据模型的key值”

案例：

数据模型：

"data":{
    "msg":"div内容",
    "username":"admin"
},

HTML代码：

<input type="text" v-model:value="username"/>

简写：v-model = “数据模型的key值”

v-model.trim = “数据模型的key值”

5.条件渲染

功能：控制元素是否显示

1.v-if true显示 false不显示

data:{
  flags:true,
},

<div v-if="flag">div1</div>

不显示标签直接删掉

2.v-else true不显示 false显示

不能单独使用，需要和v-if一起使用

v-if和v-else中间不能有多余标签

3.v-show true显示 false不显示

不显示是通过css样式设置隐藏

6.列表渲染

位置：循环哪个标签,v-for就加在哪个标签上

语法：v-for=“”

1.简单数组

data:{
    hobbys:["java","抖音","大数据","前端","网络安全","UI"]
},


 <ul>
           <li v-for="hobby in hobbys">{{hobby}}</li>
 </ul>

2.对象数组

computers:[
    {id:101,bread:"联想",price:5000},
    {id:102,bread:"外星人",price:15000},
    {id:103,bread:"诺基亚",price:4000}]

},

<table>
    <tr>
        <th>编号</th>
        <th>品牌</th>
        <th>价格</th>
    </tr>
    <tr v-for="computer in computers">
        <td>{{computer.id}}</td>
        <td>{{computer.bread}}</td>
        <td>{{computer.price}}</td>
    </tr>
</table>

需要索引的语法：v-for=“(变量,index) in 数组”

7.事件驱动

语法: v-on:事件类型=“函数调用”

案例：

<!--    单击事件绑定-->
    <input type="button" value="按钮" v-on:click="clickTest"/><br/>
<!--    值改变绑定-->
    <input type="text"  v-on:change="changeTest">

 methods:{
        clickTest:function (){
          alert("单击事件绑定成功")
        },

        changeTest:function (){
          alert("值改变事件绑定成功")
        }
      }

简写：v-on:click=“clickTest” ----------> @click=“clickTest”

========================

clickTest:function (){
alert(“单击事件绑定成功”)
},

----->

clickText(){

alert(“单击事件绑定成功”)

}

取消控件的默认行为

1.超链接

JS:		event.preventDefault();//取消控件的默认行为
Vue:	@click.prevent="clickText"   缺点：百分百取消

2.表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="Vue.js"></script>
</head>
<body>
  <div id="app">
    <a href="http://baidu.com" @click.prevent="clickText">点击跳转到百度</a>
    <form action="01_HelloWord.html" method="" @submit="submitText">
      <input type="text" name="username"/> <br/>
      <input type="submit">
    </form>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{},
      methods:{
        clickText:function (){
          alert("点击了超链接")
          //如果不想让超链接进行跳转
          //event.preventDefault();//取消控件的默认行为
        },
        submitText:function (){
          alert("表单即将被提交")
          // event.preventDefault();
        }
      }
    })
  </script>
</body>
</html>

阻止事件冒泡

JS:		event.stopPropagation();//阻止事件冒泡
Vue:	@click.stop="div2Text"

8.属性的监听

功能：当数据模型的数值发生变化时，被Vue检测到，然后执行一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="Vue.js"></script>
</head>
<body>
  <div id="app">
      <p>尊姓:{{firstName}}</p>
      <p>大名:{{lastName}}</p>
      <input type="text" v-model="firstName"><br/>
      <input type="text" v-model="lastName"><br/>
      <p>全名:{{fullName}}</p>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
          firstName:"詹姆斯",
          lastName:"哈登",
          fullName:"詹姆斯.哈登"
      },
      methods:{},
      //   写属性的监听
      watch:{
          //当firstName的属性值发生变化时，这个函数就会被调用
          firstName: function (){
            this.fullName = this.firstName+"."+this.lastName;
          },

          lastName:function (){
              this.fullName = this.firstName+"."+this.lastName;
          }
      }
    })
  </script>
</body>
</html>