Vue2.X的入门学习

最新推荐文章于 2023-07-03 18:20:50 发布

MomentWan

最新推荐文章于 2023-07-03 18:20:50 发布

阅读量271

点赞数 1

本文链接：https://blog.csdn.net/qq_26091181/article/details/89391142

版权

由于前几天跟那位技术聊了一会，深感自己目前所学知识的浅薄以及实战经验的缺失。今天初步了解了一下前端的Vue.js
时间不长，只是看了一些基本内容，肯定也是做不了什么大项目的，这里回忆一下所学知识。

1.引入Vue（此处利用Script直接引用，另外呢，Vue官网是给了很多教程的，对新手是很友好的）
官网：https://cn.vuejs.org/v2/guide/installation.html
在这里插入图片描述
打开以后，我们可以复制里面的内容，将其复制到本地（新建文本文档，复制完保存为.js）

然后你就可以在本地建一个Html文件测试

再Html的header里面我们引入

至此引入完毕。

2.容我引用一下官网的介绍：
在这里插入图片描述
3.先贴上自己写测试的所有代码

<html lang="en"  xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="./Vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item1 of list1">{{item1}}</li>
        </ul>
        <h1>{{msg1}}</h1>
        <div>
            <input v-model:value="model"/>
            <h2>{{msg2}}</h2>
            <ul>
                <testc
                v-for=" (item,index) of list2"
                :key="index"
                :pram="item"
                :index="index"
                @delete="fatherDelete"
                ></testc>
            </ul>
            <button @click="click2">第二个按钮</button>
            <div style="" >
                <h3 v-if="show">{{msg3}}</h3>
                <button @click="click3">{{button3}}</button>
            </div>
        </div>
    </div>

    <script>

        Vue.component('testc',{
            props:['pram','index'],
            template:'<li @click="sonClick">{{pram}}  {{index}}</li>',
            methods:{
                sonClick:function () {
                    this.$emit('delete',this.index)
                }
            }
        })


        new Vue({
            el:'#app',
            data:{
                msg1:'这是第一条信息',
                msg2:'这是第二条信息',
                msg3:'这条消息可以被隐藏',
                list1:[1,2,3],
                list2:[],
                show:true,
                button3:'按钮3',
                model:'这是个Model的信息'
            },
            methods: {
                click2:function(){
                    this.msg2="我是第二条信息，我被改掉了",
                    this.list2.push(this.model),
                    this.model=''
                },
                click3:function () {
                    this.show=!this.show
                },
                fatherDelete:function (index) {
                   alert('i am father')
                   this.list2.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>

怎么说呢，写起来是真的有种贼方便的感觉，这大概就是框架的魅力，但是新手的话建议还是从Html，Css，JS开始学习。

4.开始按照我的测试代码，一点一点解析

<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="./Vue.js"></script>
</head>

head里面script 引入我们的Vue，我在上面说过了

    <div id="app">
        <ul>
            <li v-for="item1 of list1">{{item1}}</li>
        </ul>
        <h1>{{msg1}}</h1>
        <div>
            <input v-model:value="model"/>
            <h2>{{msg2}}</h2>
            <ul>
                <testc
                v-for=" (item,index) of list2"
                :key="index"
                :pram="item"
                :index="index"
                @delete="fatherDelete"
                ></testc>
            </ul>
            <button @click="click2">第二个按钮</button>
            <div style="" >
                <h3 v-if="show">{{msg3}}</h3>
                <button @click="click3">{{button3}}</button>
            </div>
        </div>
    </div>

我们从第一个div的id开始说起，这个id就像是这个标志，而在这地方被叫做挂载点，如果你浏览我前面的代码会发现，再我们的Vue实例里有一个el：’app‘，这个也就对应着此处的id
v-for
v-show
v-if
这是三个Vue的指令（循环用for，是否显示可以用show，是否存在用if）我例子里好像忘记写if了，但是大家可以利用chrome调试，来看看v-if与v-show的区别，不检查元素的时候，你可能看不出什么区别。
这里演示一下，大家应该就能明白了：
1.v-for
我们可以从代码里猜测这个意思应该是从list1中取元素利用插值法在

的标签中显示
先给出list1

实际效果是这样子的

2.v-show
初始界面是这样子的：

同样我们利用chrome检查元素
看一下点击按钮3的结果

发现我们的那行文本被隐藏了，实际情况是style中display设置为了none
3.v-if
初始界面和2一样，我们在2的基础上将代码中v-show改为v-if
点击按钮之后

看到这个结果你应该能明白区别在哪里了吧。

下面我们继续：
v-model这个是在vue里进行数据的双向绑定，不管你在哪方面改，另一方面总会发生变化。
：key这个解释一下，其实就是我们在v-for遍历数组时候，类似kv一样区别开，我们这里利用的是下标index作为key（因为下标是唯一的）
：pram 这个是为了从内部传数据到模板中的一个参数名，取得是item
：index这个也是为了从内部传数据到模板中的一个参数名，取得是index
@delete其实这个是将父子组件的关联，这里是标明的删除，而且对应的删除方法为fatherDelete（组件的事情我们下面再说）
@click这个是标志着点击，也可以用v-on，同样上面的：xxx也是缩写（方便之处，可能不利于大家观看，由于自己也是入门，所以敬请原谅）

下面我们分析我们的vue.js(其实就是下面的那部分script,如果是单独写开为js的话，我们需要用src引入)：
```
    <script>
        Vue.component('testc',{
            props:['pram','index'],
            template:'<li @click="sonClick">{{pram}}  {{index}}</li>',
            methods:{
                sonClick:function () {
                    this.$emit('delete',this.index)
                }
            }
        })
        
        new Vue({
            el:'#app',
            data:{
                msg1:'这是第一条信息',
                msg2:'这是第二条信息',
                msg3:'这条消息可以被隐藏',
                list1:[1,2,3],
                list2:[],
                show:true,
                button3:'按钮3',
                model:'这是个Model的信息'
            },
            methods: {
                click2:function(){
                    this.msg2="我是第二条信息，我被改掉了",
                    this.list2.push(this.model),
                    this.model=''
                },
                click3:function () {
                    this.show=!this.show
                },
                fatherDelete:function (index) {
                   alert('i am father')
                   this.list2.splice(index,1)
                }
            }
        })
    </script>
```
testc这个就相当于我们自定义的标签
1.Vue.component这个其实就是写出了一个组件，我们一般做项目开发的话，肯定是要为了降低耦合度，为了规范代码，为了方便后期维护等等原因，不可能将代码全部写给div，所以我们利用Vue的组件将其剥离出来。这里props就是我们之前抽出来的两个参数
2.template这个就相当于是模板，就是我们抽出来的组件里面内容用什么填充
3.methods顾名思义就是写方法的地方。我在这里写的this.$emit这里是将父子组件通知的关键，delete是自定义的通知信息，其中携带了index的值
在Vue中一个关键的模式——发布和订阅模式。
而我们在下面写的 new Vue（{}）事实上就是一个Vue的实例（其实Vue.component也是一个Vue的实例）
el：’#app‘ 这个我们可以用来标志挂载点
data：就是里面的数据
methods：方法
当然还有template这样的模板，不过我这里没有写，之前测试过，如果我们在这里加入一行模板的写法

之后打开Html，你会发现你在挂载点的Div中所有东西都将被这个模板所代替，也就是这样的效果：

新手入门先到这里吧，有点困了，-_- !!!