Vue基础

最新推荐文章于 2022-10-26 17:50:28 发布

Gnod33

最新推荐文章于 2022-10-26 17:50:28 发布

阅读量127

点赞数

文章标签： vue java js javascript

本文链接：https://blog.csdn.net/qq_51620787/article/details/116991883

版权

第一个Vue程序

下载地址：

开发版本：

1.包含完整的警告和调试模式：https://vuejs.org/js/vue.js
2.删除了警告，https://vuejs.org/js/vue.min.js

cdn下载路径：

1.https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js（完整版）
2.https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js（压缩版）

vue基础

Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
        <div id="app">
            <span v-bind:title="message">
                停留在此处可以查看动态绑定的提示信息！！！
            </span>
        </div>
<!--导入Vue.js-->
       <script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm = new Vue({
                el:"#app",
                // model层
                data:{
                    message:"Hello Vue"
                }
            })

        </script>

</body>
</html>

判断条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<!--导入cdn压缩版的Vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        <!--model层-->
        data:{
        //默认type的值为A
            type:'A'
        }
    })
</script>
</body>
</html>

测试结果：
在这里插入图片描述

Vue当中的 === 与 == 的差别

== 用于比较、判断两者相等，比较时可自动换数据类型
=== 用于（严格）比较、判断两者（严格）相等，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回flase。

循环 vue-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层模板-->
<div id="app">
    <li v-for="arr in arrs">
        {{arr.message}}
    </li>
</div>

<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //model层
        data:{
            arrs:[
                {message:"皮卡丘1"},
                {message:"皮卡丘2"},
                {message:"皮卡丘3"}
            ]
        }
    })
</script>

</body>
</html>

事件的绑定 v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--view层，模板-->
<div id="app">
    <!--v-on：事件-->
    <button v-on:click="sayHi">点击我</button>
</div>


<!--导入Vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        // model层
        data:{
            message:'皮卡丘'
        },
        methods:{
            // 方法必须定义在 Vue 的 methods对象中，
            sayHi:function (event) {
                alert(this.message)
            }
        }
    })
</script>
</body>
</html>

事件双向绑定 v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <!--文本-->
    输入的文本:<input type="text" v-model="message">{{message}}
    <br/><br/><br/><br/>

    <!--文本框-->
    <textarea v-model="message"></textarea>
    {{message}}
    <br/><br/><br/><br/>

</div>
<!--导入Vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        // model层
        data:{
            message:''
        }
    })

</script>
</body>
</html>

Vue组件（重点）

1.什么是vue组件
组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th: fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:
通常一个应用会以一棵嵌套的组件树的形式来组织：

在这里插入图片描述

	  注意:在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建.vue模板文件的方式开发。

使用 Vue.component方法注册自定义组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <ul>
        <my-component-li></my-component-li>
    </ul>
</div>
<!--导入Vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //先注册组件
    Vue.component('my-component-li',{
        template:'<li>Hello li</li>'
    })

    //再实例化 Vue
    var vm = new Vue({
        el:"#app"
    });
</script>

</body>
</html>

运行结果如下：
在这里插入图片描述

说明：
Vue.component（）：注册组件
my-component-li：自定义的组件名
template：组件的模板

3.使用props属性传递参数
像上面那样定义组件没有任何意义，所以我们需要传递参数到组件，这时候就需要使用props属性了！

注意：默认规则下props属性内的值不能大写；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <ul>
        <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
    </ul>
</div>
<!--导入Vue.js-->
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //先注册组件
    Vue.component('my-component-li',{
        props:['item'],
        template:'<li>Hello {{item}}</li>'
    })

    //再实例化 Vue
    var vm = new Vue({
        el:"#app",
        data:{
            items:["张三","李四","王五"]
        }
    });
</script>

</body>
</html>

运行结果如下：
在这里插入图片描述

说明：

1.my-component-li v-for="item in items"：遍历vue实例中名为items的数组，并创建同等数量的组件
2.v-bind:item="item”:将遍历的item项绑定到组件中props定义的名为item属性上; =号左边的item为props定义的属性名，右边的为item in items 中遍历的item项的值

Vue知识点持续更新中，本人也是学生有什么地方出错请多多提出意见

Gnod33

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础

第一个Vue程序下载地址：开发版本：1.包含完整的警告和调试模式：https://vuejs.org/js/vue.js2.删除了警告，https://vuejs.org/js/vue.min.jscdn下载路径：1.https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js（完整版）2.https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js（压缩版）vue基础Vue实例<!
复制链接

扫一扫