vue入门1

奋斗的小喵喵

已于 2022-06-01 15:23:40 修改

阅读量138

点赞数

文章标签： vue.js javascript 前端

于 2022-05-31 21:53:29 首次发布

本文链接：https://blog.csdn.net/weixin_44729070/article/details/125073040

版权

vue入门知识

前言
一、vue实例
二、vue指令
三、组件
- 3.1 组件基础
总结

前言

vue是什么呢？
vue是构建前端界面的脚手架，主要是学习组件化的思想，实现高内聚、低耦合，组件的可复用性可以让我们直接引入相应的模块而不需写大量的冗余代码。本篇博客主要介绍一下vue中常用的一些指令和组件基础。

一、vue实例

1.1 vue导读

看下面例子之前首先给大家介绍一下vue实例对象里边的两个属性、data和prop
vue的内置属性data代表的是私有数据，组件内部使用
prop是公有属性，主要是对外，可用于接收父组件或页面传递过来的参数；

var dat = { a:1 }
// question:为什么vm.a就是1，为什么vm可以直接使用data里边的属性
    var vm = new Vue({
        // tip1:我们新创建的vue对象实例中，有一个data属性,我们可以
        // 把在js中定义的变量直接copy过来
        data:dat
    })

question1：我刚接触vue的时候搞不懂vue里的data：dat，为什么就可以vm.a
answer1：理解为把js中定义的dat变量直接通过data属性取到vm这个Vue实例中，vm.a可以访问到 vm.a=dat.a 这时我们在控制台中对vm.a的值进行更改也会影响到dat.a的值

1.2 使用vue的步骤

vue四部曲

首先在头部引入vue

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>

在html中写基础的页面结构
这里的id主要是为了通过vue对象实例的el属性和vue实例绑定
取的数据的格式为{{ }}

<div id="app">
    <p >
        {{dat}}
    </p>
</div>

在js中定义一个变量
这里为了和Vue对象的data属性相区别，把vue变量定义为dat

 var dat = {
        message: 2,
        pId: "我是你的id"
    };

创建一个Vue实例
el:和html中的元素进行绑定
data：取得js中定义的变量

// 在定义的vue中只负责绑定，在js中负责写数据
    var vm = new Vue({
        el: '#app',
        data: dat
    })

输出结果：

{ "message": 2, "pId": "我是你的id" }

question：不是很懂dat、data、vm分别代表什么意思，就在控制台上打印比较了一下
在这里插入图片描述
注：可以把data当作一个中间桥梁，我们通过vue的data属性实现vue对象和js中定义变量的”相等化“，然后data就没有用了，真正有意义的是vm这个实例、js中定义的dat对象
总结来讲，就是通过vue可以让html获取到我们在js中定义的值，而不用再通过dom元素进行写入（我是这么理解的…）

1.3 vue声明周期钩子

主要明白这个this指向的是Vue实例

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

1.4 计算属性

计算属性和方法的作用是一样的，计算属性的好处在于存在缓存机制，当变量的值不改变时，不会执行该计算属性，但是方法还是会被重新调用。

计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

2.方法

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

二、vue指令

2.1 v-bind

v-bind主要是可以做到class和style绑定

class绑定：动态的切换标签的class属性`

<!--②vue可以动态的为元素增加类-->

<div id="app1" v-bind:class="[activeClass,errorClass]"></div>
<!--渲染后的结果为  一定要有el绑定大的盒子后，才可以使用v-bind属性进行内置
对象data的绑定-->
<script>
    new Vue({
        el : '#app1',
        data: {
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    })
</script>

执行完后，在浏览器观察可以看到vue实例中的属性在div中存在了
在这里插入图片描述

v-bind用来改变css的样式

<div id="app">
    <p v-bind:style="pro">nihao</p>
<!--    注意：v-if对应的data属性，应是一个可以判断布尔值的表达式-->
    <p v-if="awesome">Vue is awesome!</p>
    <p v-else>错</p>
</div>
<script>
    var app = new Vue({
        el : '#app',
        data : {
            pro: {
                color : 'red',
                fontSize: '16px'
            },
            awesome : (5 < 3)
        }

    })

</script>

这里我用了简单的方法，直接创建了一个pro对象用来接收css样式
v-bind:style=“pro” 后，在浏览器看到css的style样式就被渲染成功了。
在这里插入图片描述

2.2 v-if指令

v-if 所绑定的属性一定是结果为布尔值的元素
具体用法看上一个渲染css的实例

2.3 v-for指令

v-for把一个数组对应为一组元素

2.3.1 v-for渲染数组和对象

①v-for可以基于数组来渲染一个列表

<div id="a">
    <ol>
        <li v-for="s1 in student">
            name:{{s1.name}},
            age:{{s1.age}}
        </li>
    </ol>
</div>
<script>
    var a = new Vue({
        el : '#a',
        data : {
            student: [
                {name:'miao',age: 18},
                {name: 'xiao',age: 16}
            ]
        }
    })
</script>

在这里插入图片描述
v-for 还支持一个可选的第二个参数，即当前项的索引。
②v-for可以用来遍历一个对象的所有属性

<div>
    <ol id="app">
        <li v-for="v in student">{{v}}</li>
    </ol>
</div>
<script>
    var x = new Vue({
        el : '#app',
        data : {
            student : {
                name: 'miao',
                age : 13
            }
        }
    })
</script>

在这里插入图片描述
也可以提供第二个的参数为 property 名称 (也就是键名)、还可以用第三个参数作为索引
v-for渲染数组和对象的方式是不同的：v-for渲染数组的话需要加" .属性值"，v-for渲染对象的话只需要把对象本身名输出即可，这时会默认输出对象的全部值

2.3.2 在组件上使用v-for

2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。
我们看一个todo-list的例子

<body>
<div id="todo-list-example">
<!--  v-on:submit.prevent 代表提交事件不再重新加载界面-->
    <form v-on:submit.prevent="addNewTodo">
<!--        label标签：提示标签，主要是用于提示后买你组件的含义/作用-->
<!--        属性for的值是：要提示的组件的id-->
        <label for="new-todo">Add a todo</label>
<!--        你可以用 v-model 指令在表单 <input>、<textarea> 及
 <select> 元素上创建双向数据绑定-->
        <input
            v-model="newTodoText"
            id="new-todo"
            placeholder="E.g. Feed the cat"
        >
        <button>Add</button>
    </form>
    <ul>
        <li
            is="todo-item"
            v-for="(todo, index) in todos"
            v-bind:key="todo.id"
            v-bind:title="todo.title"
            v-on:remove="todos.splice(index,1)"
        ></li>
    </ul>
</div>

<script>
    Vue.component('todo-item',{
        template: '\
        <li>\
            {{ title }}\
            <button v-on:click="$emit(\'remove\')">Remove</button>\
        </li>\
        ',
        props: ['title']
    })

    new Vue({
        el: '#todo-list-example',
        data: {
            newTodoText: '',
            todos: [
                {
                    id: 1,
                    title: 'Do the dishes',
                },
                {
                    id: 2,
                    title: 'Take out the trash',
                },
                {
                    id: 3,
                    title: 'Mow the lawn'
                }
            ],
            nextTodoId: 4
        },
        methods: {
            addNewTodo: function () {
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText = ''
            }
        }
    })
</script>

</body>
</html>

2.4 v-model表单输入绑定

v-model 指令在表单、及元素上创建双向数据绑定
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model简单来说就把我们在表单、文本框输入的值会同步对应到{{ }}处

三、组件

3.1 组件基础

组件就是可复用的vue实例，它们可以和vue实例接收相同的选项、比如说：data、computed、watch、methods、唯一不同的就是组件没有el选项
①利用组件输出一个变量

<div id="app">
    <button-counter></button-counter>
</div>
Vue.component('button-counter',{
        data: function () {
            return{
                count:0
            }

        },
        template:'<button v-on:click="count++">{{ count }}次</button>'
    })
    // 组件必须被实例化之后才可以使用
    new Vue({
        el:'#app'
    })

②组件里的props属性
感觉我学写代码超级痛苦哈哈哈哈哈
既然前边说了组件就是特殊的vue实例，所以可以把vue的一些用法迁移过来，记得刚学vue实例的时候把data看作一个属性，昨天有个哥哥说看作属性倒不如看作java中的关键字，类似于public、private，其实组件中的props在这里就是相当于取个别名，叫什么都无所谓，其作用主要是在使用模板时和vue实例进行绑定，但是模块里的{{ }}变量值一直要和props里的别名对应
官方文档写的很详细，但是有一个我觉得不是很好的地方就是倾向于使用同名的变量名，这对于初学者来说非常不友好，建议初学者尝试自己给变量命不同的名字，这样的话理解起来会简单很多

<!--组件进阶：包含props属性的组件-->
<div id="blog-post-demo">
<!-- v-bind的key是必须的，v-bind的titl是组件定义的别名
值的话才是vue实例里的对象-->
    <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:titl="post.title"
    ></blog-post>
</div>

<script>
    Vue.component('blog-post',{
        props:['titl'],
        template: '<h3>{{ titl }}</h3>'
    })

    new Vue({
        el : '#blog-post-demo',
        data:{
            posts:[
                { id:1,title:'My journey with Vue'},
                { id:2,title:'My journey with Vue'},
                { id:3,title:'My journey with Vue'},

            ]
        }
    })

</script>

可以理解为我们在模板里边使用键值对将我们定义的组件和创建的vue实例进行一对一绑定
③有时我们需要的组件比较复杂，我们想要它可以接收更多的内容，这时可以将模板的内容包裹在一个父元素内

Vue.component('blog',{
        props: ['pos'],
        template: '<div class="blog">\n' +
            '  <h3>{{ pos.title }}</h3>\n' +
            '  <div>你好</div>\n' +
            '</div>'
    })