当前位置 博文首页 > zhouqiyuan1233的博客：Vue基础语法

最大化 缩小

    zhouqiyuan1233的博客：Vue基础语法

    作者：[db:作者] 时间：2021-08-09 22:12

    狂神教学视频链接

    CSS预处理器

    css缺陷：
    在这里插入图片描述
    解决方法：css预处理器
    在这里插入图片描述

    VUe特性：
    虚拟DOM 计算属性

    在这里插入图片描述

    1. 第一个Vue项目

    引入 Vue.js : https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js

    代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    {{message}}
</div>


<script>
    var vm = new Vue({
        el: "#app",//绑定标签，el是元素的意思
        data: {
            //数据都是以键值对的方式存在的
            message: "hello Vue!"
        }
    });
</script>

</body>
</html>

    注意：程序里Vue这三个字母一定要一字不差的打，不要改大小写，否则会识别不出来。

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

    简单实现一下双向绑定：
    在这里插入图片描述
    直接从控制台更改程序的js代码，界面立即改变。

    本程序里的vm就是个Vue实例化对对象，它时刻监听，当数据发送变化立即渲染到前端，不需要刷新界面。
    Vue不改变Dom元素（使用虚拟Dom），只是更改了里面的值。
    即时运行即时编译

    Vue核心，实现了Dom监听和数据绑定

    2.Vue基本语法

    v-bind：用于绑定数据和元素属性

    代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
   <span v-bind:title="message">
       鼠标悬停几秒查看此处绑定的信息
   </span>
</div>


<script>
    var vm = new Vue({
        el: "#app",//绑定标签，el是元素的意思
        data: {
            //数据都是以键值对的方式存在的
            message: "hello Vue!"
        }
    });
</script>

</body>
</html>

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

    v-if

    代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if-else</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>


<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: "A"
        }
    });
</script>
</body>
</html>

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

    v-for

    代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
    <li v-for=" item in items">
        {{item.message}}
    </li>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {message: '今天是个好日子'},
                {message: '今夜阳光明媚'},
                {message: '今夜多云转晴'}
            ]
        }
    });
</script>
</body>
</html>

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

    循环还能打印下标：

        <li v-for=" (item,index) in items">
        {{item.message}}-----{{index}}
    </li>

    在这里插入图片描述

    动态向数组中添加数据：
    vm.items.push({message: ‘今夜多云转晴’});
    在这里插入图片描述

    v-on 绑定事件

    代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
</head>
<body>

<div id="app">
<button v-on:click="sayHi">点我</button>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "针不戳"
        },
        methods: {
        定义的方法必须写在这里,event是传入事件
            sayHi: function (event) {
                alert(this.message)
            }
        }
    });
</
    上一篇：zhouqiyuan1233的博客：Vue-cli项目环境搭建和使用
    下一篇：没有了