VUE.JS笔记

最新推荐文章于 2022-09-26 22:15:37 发布

手一碰键盘就紧张

最新推荐文章于 2022-09-26 22:15:37 发布

阅读量139

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_14942963/article/details/117856632

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VUE.JS笔记

1.初识Vue

1.1第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入vue</title>
    <style>
        #app{
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
<!--视图-->
<div id="app">
    {{message}} //通过{{数据名}}来引用数据
</div>
<!--导入Vue的依赖(路径根据实际情况更改)-->
<script src="../lib/vue.js"></script>
<script>
<!--这是model -->
    var exampleData = {
        message:"hello,World!"
    }
<!--创建一个Vue实例或ViewandModel,他用于连接View与Model -->
    var vm = new Vue({
        el:'#app', //这个表示元素,即element(这里指的是id为app的元素)
        data:exampleData //这个表示数据
    })
</script>
</body>
</html>

实现效果:
代码实现效果
补充:因为数据由View and Model传输,也就是代码中的vm,它可以实时与视图和模型进行交互,所以在浏览器后台更改数据也可以实时展现,看以下图
虚拟DOM操作的体现
总结: 创建Vue实例,只需要 var vm = new vue({})即可,在{}中可以有选项参数:
1.el:提供一个页面上已经存在的DOM元素作为Vue的实例对象的挂载目标
2.data:Vue实例的数据对象,Vue会递归的将data的属性转换为setter/getter,从而让data的属性能够响应数据的变化(双向绑定)
3.methods:Vue实例的方法的集合,可以在Vue直接调用或将方法绑定到DOM元素的事件上.
4.computed:Vue实例的计算属性集合
5.watch:观察Vue实例变化的一个表达式或计算属性函数?
6.components:包含Vue实例可用组件的哈希表
7.filters:包含Vue实例可用过滤器的哈希表
8.template:定义字符串模板作为Vue实例的标识使用

1.2Vue的if和for

先上代码

<body>
<div id="app">
<!--通过v-if="表达式"对下面vm中的值进行判断 -->
    <h1 v-if="type=='A'">type的值是A</h1>
    <h1 v-else-if="type=='B'">type的值是B</h1>
    <h1 v-else>type的值它啥也不是</h1><br>
</div>
<div>-----------------------------------------------------------------------------------</div><br>
<div id="app2">
<!--v-for循环:items为传入的数组或集合,item为循环出来的对象,index为下标(可省略) -->
    <li v-for="(item,index) in items">
        {{item.message}}----{{index}}
    </li>
</div>
<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app', 
        data:{
            type:'A'

        } 
    })
    var vm2 = new Vue({
        el:"#app2",
        data: {
        <!--传入的数据为items数组 -->
            items: [
                {message:"项目1"},
                {message:"项目2"},
                {message:"项目3"},
            ]
        }
    });
</script>
</body>

效果图:
在这里插入图片描述

1.3Vue的事件绑定

先上代码

<body>
<div id="app">
    <button v-on:click="hi">点击</button>
</div>
<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
          message:"hello!Vue!" //牢记:data后面的数据,需要有{}框起来
        },
        <!--是methods,不是method!-->
        methods:{
            hi:function (event) {
                alert(this.message)
            }
        }
    })
</script>
</body>

效果既点击出现alert弹窗

1.4模型数据的双向绑定

前面已经通过对vm.message的设置,可以做到从数据到模型的绑定,接下来演示如何从模型到数据的绑定

<body>
//如何绑定文本框 对应vm的vue实例,通过v-model=数据名,并给数据一个默认值,即可与该数据进行双向绑定
<div id="app">
    请输入内容: <input name="name" type="text" v-model="message">
    {{this.message}}
</div>
//第二个示例,如果双向绑定下拉框,双向绑定原理与输入框相同
<div id="app2">
     请选择值:<select v-model="checked" >
            <option value="男">男</option>
            <option value="女">女</option>
</select>
    你选择的性别是:{{checked}} 对应vm2的vue实例
</div>
<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message : "123",
        },
        methods:{}
    })
    
    var vm2 = new Vue({
        el:"#app2",
        data: {
            checked:"男"
        },
        methods: {}
    })
</script>
</body>

2.深入认识Vue

2.1 Vue组件介绍

组件:对现有标签进行一个封装? 具体看代码理解

<body>
<div id="app">
<!-- 在组件中用v-for遍历数据,并用v-blind进行绑定,把绑定的数据放入组件模板中-->
    <pxc v-for="item in items" v-bind:num="item"></pxc>
</div>
<script src="../lib/vue.js"></script>
<script>
<!--创建一个组件 Vue.component-->
    Vue.component("pxc",{  //"pxc":是组件名称,
        props:['num'],      //将绑定的num数据作为参数传入组件,
        template:"<P>{{num}}</P>" //组件要代替的模板,然后在组件中取出num参数并显示出来
    });
var vm = new Vue({
    el:"#app",
    data:{
        items:[
            "java","linux","html","css"
        ]   //要遍历循环的数据
    },
    methods:{}
})
</script>
</body>

异步请求还没弄清楚,下次一定

2.2 Vue的计算属性

简单来讲,就是把计算的值放入内存中短暂存储,类似于缓存。上代码

<body>
<div id="app">
调用methods中的函数方法获得的时间戳:{{time()}}<br>
<!-调用函数方法时带了括号,调用计算属性时只是调用属性,没有括号-->
调用computed中的计算属性获得的时间戳:{{time2}}
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
    el:"#app",
    data:{
        message:"hello,vue!"
    },
    methods:{
        time:function () {
                return Date.now();
        }
    },
    computed:{  //注意:计算属性中的方法名和methods中的方法名最好不要重名
        time2:function () {
                this.message
                return Date.now();
        }
    }
});
</script>
</body>

理解看效果图(注意,我在computed中有放this.message),
在这里插入图片描述

总结：当有不常改变的值时，可以使用计算属性，将其进行缓存，可以减少系统的开销。

3.Vue的进阶之路

3.1 Vue插槽的使用

理论：当前端的页面代码中，有以下代码，但是我们需要在<li></li>标签中循环一组数据，并在<p></p>标签中加入动态标题但是我们不需要动<div>和<ul>,所以上代码

<body>
<p>Kaman Rider</p>
<ul>
    <li>空我</li>
    <li>龙骑</li>
    <li>剑骑</li>
    <li>响鬼</li>
    <li>甲斗</li>
</ul>
</body>

所以对代码略做出改变

在第一个父模板中,把不需要改动的<div>和<ul>原封不动放入,把需要改动的代码用插槽标签<slot>代替,得到如下代码:,

    Vue.component("todo",{
        //在slot中,用name属性定义对应的模板名称
        template:'<div>\
        <slot name="todo-title"></slot>\
            <ul>\
            <slot name="todo-data"></slot>\
            </ul>\
            </div>'
    });

在两个<slot>标签中,用name属性对应着不同的两个模板,分别对应<p>和<li>标签的数据,两个代码的模板如下:

	<!--子模板,用于在父模板中使用 -->
    Vue.component("todo-title",{
        //参数,来自实际使用中传过来的参数
        props:['title'],
        template:' <p>{{title}}</p>'
    });
    <!--子模板,用于在父模板中使用 -->
    Vue.component("todo-data",{
        props:['item'],
        template:'<li>{{item}}</li>'
    });

然后在Vue中定义我们需要展示的数据,代码:

 let vm = new Vue({
        el:"#app",
        data:{
            titledata:"Kaman Rider",
            listdata:[
                "空我","龙骑","剑骑","响鬼","甲斗"
            ]
        },
        methods:{},
    })

最后在网页中用模板来展示

<div id="app">
    <todo>
        <!--在真实使用中,用slot定义对应的模板 -->
        <todo-title slot="todo-data" :title="titledata"></todo-title>
        <todo-data slot="todo-data" v-for="item in listdata" :item="item"></todo-data>
    </tod

最终，完全版的代码如下

<body>
<div id="app">
    <!-- -->
    <todo>
        <!--在真实使用中,用slot定义对应的模板 -->
        <todo-title slot="todo-data" :title="titledata"></todo-title>
        <todo-data slot="todo-data" v-for="item in listdata" :item="item"></todo-data>
    </todo>
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
    <!--这个是父模板,定义了整个模板中需要几个插槽 -->
    Vue.component("todo",{
        //在slot中,用name属性定义对应的模板名称
        template:'<div>\
        <slot name="todo-title"></slot>\
            <ul>\
            <slot name="todo-data"></slot>\
            </ul>\
            </div>'
    });
    <!--子模板,用于在父模板中使用 -->
    Vue.component("todo-title",{
        //参数,来自实际使用中传过来的参数
        props:['title'],
        template:' <p>{{title}}</p>'
    });
    <!--子模板,用于在父模板中使用 -->
    Vue.component("todo-data",{
        props:['item'],
        template:'<li>{{item}}</li>'
    });
    let vm = new Vue({
        el:"#app",
        data:{
            titledata:"Kaman Rider",
            listdata:[
                "空我","龙骑","剑骑","响鬼","甲斗"
            ]
        },
        methods:{},
    })
</script>
</body>

3.2自定义内容分发

基于3.1的代码进行改进,当我要对列表中的数据进行删除操作,看下图
在这里插入图片描述
很显然,我们需要对我们创建的Vue实例vm中的数据(data)进行操作,所以我们要在实例中创建方法,代码如下

    let vm = new Vue({
        el:"#app",
        data:{
            titledata:"Kaman Rider",
            listdata:[
                "空我","龙骑","剑骑","响鬼","甲斗"
            ]
        },
        methods:{
            removieitem:function (index) {
                console.log("删除了第"+index+"个元素")
                <!-- splice:删除下标为index,长度为1的一个值,长度:表示要删除几个值 -->
                this.listdata.splice(index,1);
            }
        },
    })

但是我们在组件(Vue.component)中加入一个<button>标签时,无法直接调用Vue实例中的方法,所以我们用以下方法

<div id="app">
    <todo>
        <todo-title slot="todo-data" :title="titledata" :index="index"></todo-title>
        <!--在模板标签中,使用事件绑定,把Vue实例中的removieitem()方法绑定到remove上 -->
        <todo-data slot="todo-data" v-for="(item,index) in listdata" :item="item" :index="index" v-on:remove="removieitem(index)" ></todo-data>
    </todo>
</div>

最后在模板中写一个方法,来调用这里定义的事件:remove

    Vue.component("todo-data",{
        props:['item','index'],
        <!--在模板中加入<button>标签,并绑定组件中写的方法removemethods,组件方法里调用自定义事件remove-->
        template:"<li>{{index}},{{item}}<button @click='removemethods(index)'>删除</button></li>",
        methods: {
             removemethods:function (index) {
             //调用上面定义的自定义事件:remove
                    this.$emit("remove",index)
             }
            }
    });

以上就已经完成了Vue的基本入门,接下来开始接触Vue
1.去官网下载Node.js: https://nodejs.org/en/ 并完成安装
2.完成安装后,用命令提示符,输入node -v和npm -v,显示版本即安装成功
3.安装淘宝镜像下载器:install
4.安装的位置：C:\Users\administrator\AppData\Roaming\npm
5.然后安装vue-cli脚手架:cnpm instal1 vue-cli-g
6.输入vue init webpack myvue创建一个vue的初始文件夹(后面一路no即可)
7.安装配置环境cnpm install也可以使用npm install
8.输出npm run dev即可打包成功,查看网页
经过以上操作,就完成了对Vue-cli脚手架的创建