05_Vue基础入门-Toy模板网

这篇具有很好参考价值的文章主要介绍了05_Vue基础入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue的作用

渐进式的前端框架(里面的框架按需获取)

vue特点

1.解耦视图和数据

2.双向数据绑定

3.可复用的组件:常用的按钮和表格

4.前端路由数据:页面跳转

5.状态管理

6.虚拟DOM

引入方式

1.使用CDN连接引入,加载速度更快

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.下本地载源码引入

将文件保存到项目中,拖到引用的js文件中

3.使用NPM

使用npm将依赖下载到Node中

vue初始用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--下载引入文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <h1>{{msg}}</h1>
</div>
</body>
<script>
    let v=new Vue({
        el:"#app",  //指定将元素挂在到哪里,前面的el是固定的
        data:{      //data是固定的
            msg:"我是一个app"
        }
    })
</script>

**el属性:**指定将元素挂载到那个元素上,可以使用id,class,标签属性

data属性:里面存储的数据,可以是多个对象和多个数组

**{{msg}}😗*插值表达式,避免了数据写死,里面可以写三元运算表达式

MVVM模型

是一种前端的思想

**含义:**数据模型改变视图模型也会跟着改变

三层模型

view层:展示信息

Model层:数据层

VM:视图模型,是view层和model层的桥梁

插值表达式

作用的地方:在文本内容中

防止文本数据写死

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <h1>{{msg}}</h1>
  <div>
    {{name}}-{{age>18?'成年':'未成年}}
    {{phone.substring(0,3)+'****'+phone.substring(7)}}
  </div>
</div>
</body>
<script>
  new Vue({
    el:"#app",  //指定将元素挂在到哪里,前面的el是固定的
    data:{      //data单词 是固定的
      msg:"我是一个app",
      name:"张三",
      age:21,
      phone:123456789132
    }
  })
</script>

v-bind属性

作用的地方:在标签中

数据的单向绑定

只有数据的变动影响视图,视图的变动不能影响数据

语法:

	v-bind:标签属性名="data中的属性名称"

简写的方式

	:标签属性名="data中的属性名称"

示例

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <h1>{{title}}</h1>
  <!--path绑定数据,里面已经有vue 的属性,不需要增加{}-->
  <img v-bind:src="path" width="100px">
  <!--path绑定数据,简写方式-->
  <img v-bind:src="path" width="100px"><br>
  <a :href="code">叩丁狼</a>

</div>
</body>
<script>
  new Vue({
    el:"#app",  //指定将元素挂在到哪里,前面的el是固定的
    data:{      //data是固定的
      msg:"我是一个app",
      title:"单向绑定",
      path:"../imgs/2.png",
      code:"https://www.wolfcode.cn"
    }
  })
</script>

v-on属性

作用的地方:写在标签中

作用:事件绑定

语法:

v-on:事件类型="methods中的回调函数"

简写方式

@:事件类型="methods中的回调函数"

**methods:**用于写处理函数和方法,也是一个对象

注意事项:

1.里面的this表示的vue对象,不是这个事件源

2.获取事件源对象:e(事件源).currentTarget

3.事件对象

3.1 直接在绑定事件处, 传⼊ $event(固定) 对象即可

3.2 绑定事件时, 直接绑定响应处理函数的引⽤, ⽽不是调⽤该函数

<body>
<div id="app">
    <h1>{{title}}</h1>
    <!--事件绑定,这里不是调用函数-->
    <button v-on:click="deleteConfirm()">删除</button>
    <!--事件绑定简写:   @事件名="回调函数"  -->
    <button @click="deleteConfirm($event,2)">删除2</button>
    <!--鼠标移入移出事件-->
    <div style="height: 100px;width:400px;background: red "
         @mouseover="over()" @mouseout="out()"></div>

</div>
</body>
<script>
    let v = new Vue({
        el: "#app",  //指定将元素挂在到哪里,前面的el是固定的
        data: {      //data是固定的
            title: "单向绑定"
        },
        methods: {//添加方法,函数,也是一个对象
            deleteConfirm: function (e, id) {
                console.log("删除确认");
                //this表示的是vue的这个对象,不是一个事件源
                console.log(this)
                //通过事件对象拿事件源
                console.log(e.currentTarget)
                //获取传递过来的的自定义参数
                console.log(id)
            },
            over: function () {
                console.log("鼠标移入");
            },
            out: function () {
                console.log("鼠标移出");
            }
        }
    })
</script>

v-if和v-show属性

作用:用于元素的显示和隐藏,写在标签里面

区别:

v-if:当值设为false的时候,浏览器中会将这个标签进行删除达到隐藏的效果

**v-show:**将值设为false的时候,使用css中的样式style-display:none隐藏标签

<div id="app">
    <h1>元素的显示和隐藏</h1>
    <!--
    v-if:若是false,从页面上删除该标签
    v-show:如果是false,则使用css中的样式style=display:none隐藏标签
    -->
    <button v-if="true">删除</button>
    <button v-show="collect" @click="change(false)">点击收藏</button>
    <button v-show="!collect" @click="change(true)">取消收藏</button>


</div>
</body>
<script>
    let v = new Vue({
        el: "#app",  //指定将元素挂在到哪里,前面的el是固定的
        data: {      //data是固定的
            title: "元素的显示和隐藏",
            collect: "true"
        },
        methods: {
            change:function (collect)  {
                //修改data中的collect的值
                //访问data中的数据:this.属性名
                this.collect = collect;
            }
        }
    })

区别

v-for循环遍历

**作用地方:**写在标签当中,对数组或者对象进行遍历

**数组遍历:**可以得到数组的元素和索引值

**对象遍历:**的到对象的属性值和属性名

语法:

 v-for=(遍历后的别名,索引) in 遍历的对象

示例:

<div id="app">
  <h1>{{title}}</h1>
 <table width="50px" border="1">
   <tr>
     <th>编号</th>
     <th>姓名</th>
     <th>年龄</th>
     <th>邮箱</th>
   </tr>
   <!--格式是 v-for=(遍历后的别名,索引) in 遍历的对象-->
   <tr v-for="(stu,index) in students">
    <!-- 正常书写
       <th>{{stu.id}}</th>
     <th>{{stu.name}}</th>
     <th>{{stu.age}}</th>
     <th>{{stu.email}}</th>
         -->
     <!--简写方式,对遍历后的对象再进行遍历-->
     <td v-for="(value,name) in stu">{{value}}</td>
   </tr>
 </table>
</div>
</body>
<script>
  let v=new Vue({
    el:"#app",  //指定将元素挂在到哪里,前面的el是固定的
    data:{      //data是固定的
      title:"循环遍历",
      students:[{id:1, name:"张三", age:"25", email:"zhangsan.com"},
        {id:2, name:"张三2", age:"26", email:"zhangsan2.com"},
        {id:3, name:"张三2", age:"27", email:"zhangsan3.com"}
      ]
    }
  }
</script>

v-model数据双向绑定

作用地方:只能作用于表单元素(input,select,button…)

**过程:**改变视图数据的时候model的数据也会改变,model数据改变的时候视图数据会改变

语法:

<表单元素  v-model="数据的名称">

<div id="app">
    <h1>{{title}}</h1>
    账号:<input type="text" v-model="formData.username"><br>
    地址:
    <select v-model="forData.address">
        <option value="sc">四川</option>
        <option value="sc">广东</option>
        <option value="sc">沈阳</option>
    </select>
</div>
</body>
<script>
    let v = new Vue({
        el: "#app",  //指定将元素挂在到哪里,前面的el是固定的
        data: {      //data是固定的
            title: "数据双向绑定",
            formData: {
                username: "admin",
                address: "gd"
            }

        }
    })
</script>

vue组件化开发

**作用:**达到代码复用,责任分离,可维护性高

1.将页面拆分成一个个小的,可复用的组件

2.组件化的代码更加方便组织和管理,扩展性更强

1.全局组件

这个组件在全局的任何地方都可以进行调用(首先这个调用的标签元素必须得挂载,否则使用无效)

步骤:

1.将写好的html标签代码作为模板,放在组件中,需要使用的地方就直接进行调用

2.先写好html标签之后再将其放在全局组件中,使用的Vue.component,都写在

 /*注册全局组件*/
//全局组件 Vue.component('组件别名', {配置对象});
    Vue.component("mybtn", {
        template: ' <button style="width: 100px;height: 40px;background:skyblue">按钮</button>'
    })

3.添加了组件之后,仍然需要挂载元素

let v = new Vue({
    el: "#app",  //指定将元素挂在到哪里,前面的el是固定的
    data: {      //data是固定的
        title: "全局组件",
    }
});

4.在使用的地方进行调用,使用别名这个标签进行调用

<div id="app">
    <h1>{{title}}</h1>
    <mybtn></mybtn>
</div>

2.局部组件

注意事项:

1.在挂载元素里面引用组件

2.引用的名称不能使用大写字母

步骤

1.定义组件(只能使用tempate标签定义)

<!--定义组件-->
<template id="mytable">
    <table border="1">
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>xiaoliu</td>
            <td>18</td>
            <td>
                <a href="#">编辑</a> |
                <a href="#">删除</a>
            </td>
        </tr>
    </table>
</template>

2.使用template属性注册组件,let命名无规定

//注册组件
   let tableTemp={
       template: "#mytable"
   }

3.挂载元素并且引用组件(components)

//挂载元素
	let v=new Vue({
		el:"#app",
		data:{
		title:"全局组件"
		},
		//引用组件,在挂载里面使用进行引用
		components:{
			mytable:tableTemp
		}
	})

4.在元素中调用组件

<div id="app">
    <h1>{{title}}</h1>
<!--    调用组件-->
<mytable></mytable>
</div>

组件通讯

父组件传子组件(操作步骤和局部组件一样)

父组件可以传递多个props给子组件

在注册组件的时候,使用props来获取父组件的数组或者对象,要指定父组件的类型

//注册组件
let tableTemp = {
    template: "#mytable",
    //获取父组件的数组或者对象,指定父组件的类型
    props: {
        list: Array
    }
}

必须对父组件和子组件进行绑定

<div id="app">
    <h1>{{title}}</h1>
    <!--将父组件中的数据绑定到子组件里面    必须绑定-->
    <mytable :list="students"></mytable>
</div>

子组件传父组件

子组件就是一个表格,点击删除按钮的时候会触发自定义事件,子组件将id传递给父组件,父组件接收到参数后执行相应的处理

具体的步骤

1.通过点击删除按钮执行自定义点击事件,并执行函数传入id

<a href="JavaScript:;" @click="del(stu.id)">删除</a>

2.在注册组件的时候定义一个方法用于接收id并执行相应的,里面使用this.$emit(“自定义事件名称”,id)

//注册组件
let tableTemp = {
    template: "#mytable",
    //获取父组件的数组或者对象,指定父组件的类型
    props: {
        list: Array
    },
    //子组件定义一个函数
    methods:{
        del:function (id) {
            console.log("子组件的id:"+id);
            
            //触发的事件类型,触发指定的事件,将id传给父组件,id就是响应函数的参数
            this.$emit('ondelete',id);

        }
    }
}

3.使用绑定事件将id传递给父组件(必须进行绑定),父组件根据id调用相应的函数

<!--绑定事件-->
<mytable :list="students" @ondelete="doDelete"></mytable>

4.父组件在Vue中执行相应的函数文章来源地址https://www.toymoban.com/news/detail-516199.html

 ,methods: {
            doDelete:function(id){
                console.log("父组件接收到子组件的参数:"+id)
            }
        }

到了这里，关于05_Vue基础入门的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

05_Vue基础入门