快速入门Vue（一）

小蔡coding
160 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

二、Vue

更详细的Vue请看快速入门Vue_小蜗牛耶的博客-CSDN博客

2.1 什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

官方网站：cn.vuejs.org

2.2 初始Vue.js

Hello Vue

第一步：创建一个.html文件，在里边输入一个！出现弹窗直接回车即可

vscode内置的，输入！号即可输出html模板

image-20220410170001030

第二步：引入js文件，类似于jquery

链接：pan.baidu.com/s/1CUQSOwRy… 提取码：idea 将里边的vue.min.js文件复制到自己项目中的文件夹

image-20220410170050788

第三步：创建一个div标签 给div标签添加属性

<div id="app"></div>

第四步：编写vue代码，固定的格式

el 就是element元素的意思

<script>
    //创建一个vue对象
    new Vue({
    el: `#app`,     //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
    data:{ //定义页面中显示的模型数据，初始化数据(页面可以访问)
        message: `hello Word!`
    }
})
</script>

第五步：使用 插值表达式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <!-- 插值表达式，绑定vue中的data数据 -->
            {{ message }}
        </div>
        <script src="vuejs/vue.min.js"></script>
        <script>

            // 创建一个vue对象

            new Vue({

                el: '#app', //绑定vue作用的范围

                data: { //定义页面中显示的模型数据

                    message: 'Hello Vue!'

                }
            })

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

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

将改代码复制上去然后测试代码片段

{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
    "",
    "<head>",
    "   <meta charset=\"UTF-8\">",
    "   <meta name=\"viewport\" content=\"width=device-width, initial- scale=1.0\">",
    "   <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
    "   <title>Document</title>",
    "</head>",
    "",
    "<body>",
    "   <div id=\"app\">",
    "",
    "   </div>",
    "   <script src=\"vue.min.js\"></script>",
    "   <script>",
    "   new Vue({",
        "   el: '#app',",
        "   data: {",
        "   $1",
        "   }",
        "   })",
        "   </script>",
    "</body>",
    "",
    "</html>",
],	
"description": "my vue template in html"
}	
}

创建一个html文件在里边输入vuethml这边的名字取决于上边**"prefix": "vuehtml"**取得名字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="vuejs/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

2.3 基本语法

基本数据渲染和指令

image-20220410105502271

双向绑定

M 模型(Model) ：data中的数据

V 视图(View) ：模板代码（不是静态页面） （两个语法：指令，大括号表达式）

VM viewModel: 视图模型（Vue的实例）

Dom Listeners （Dom 监听） Data Bindings （数据绑定） data中所有的属性，最后都出现在了vm身上。 vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

==MVVM== MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。

模型model指的是后端传递的数据，视图view指的是所看到的页面。

视图模型viewModel是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：

将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定 将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听

这两个方向都实现的，我们称之为数据的双向绑定

<div id="app">
    <!-- v-bind:value只能进行单向的数据渲染 -->
    <input type="text" v-bind:value="search.keyWord"/>
        <!-- v-model 可以进行双向的数据绑定 -->
        <input type="text" v-model="search.keyWord"/>
            <p>{{search.keyWord}}</p>
</div>
<script src="vuejs/vue.min.js"></script>
<script>
    new Vue({
    el: '#app',
    data: {
        search:{
            keyWord:'库里'
        }
    }
})
</script>

绑定事件

<div id="app">
    <button v-on:click="search()">查询</button>
</div>

<script src="vuejs/vue.min.js"></script>
<script>
    new Vue({
    el: '#app',
    data: {
        searchMap:{
            keyWord:'库里'
        },
        //查询结果
        result: {}
    },
    methods:{   //定义多个方法
        search(){
            console.log('search.......')
        },
        f1(){
            console.log('f1.....')
        }

    }
})
</script>

简写

==绑定单击事件的时候也可以用@click==

绑定的单击事件也可以不加括号

<div id="app">
<button v-on:click="search()">查询</button>
<button @click="f1()">查询</button>
</div>

vue修饰符和条件指令

==重要的是记住prevent这个指令，它的作用是当表单提交的时候不会提交表单，而是执行onSubmit方法==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 提交表单的时候不会直接提交表单,而是先去执行onSubmit方法 -->
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.name"/>
            <button type="submit">保存</button>
        </form>
    </div>
    <script src="vuejs/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onSubmit(){
                    if(this.user.name){
                        console.log('提交表单')
                    }else{
                        alert('请输入用户名')
                    }
                }
            }
        })
    </script>
</body>

</html>

image-20220410224839096

条件渲染

v-if：条件指令

这个逻辑很好理解

复选框双向绑定了ok对象默认是false所以默认下面就会出现库里

点击复选框就会出现詹姆斯

==v-if== 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

==v-if== 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<body>
    <div id="app">
        <input type="checkbox" v-model="ok"/>是否同意
        <h1 v-if="ok">詹姆斯</h1>
        <h1 v-else>库里</h1>
    </div>
    <script src="vuejs/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

循环指令

v-for：列表循环指令例1：简单的列表渲染

<body>
    <div id="app">
        <!-- in后面是遍历的次数,前面是遍历的值.in是固定写法 -->
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>

        <!-- n为值，index为索引值 -->
        <ol>
            <li v-for="(n,index) in 10">{{n}}--{{index}}</li>
        </ol>
        <hr/>
        <table border="1">
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>
    <script src="vuejs/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[
                    {id:1,username:'helen',age:18},
                    {id:2,username:'hello',age:12},
                    {id:3,username:'ABC',age:15}
                ]
            }
        })
    </script>
</body>

image-20220410231647322

avatar
文章
阅读
粉丝