vue基础

最新推荐文章于 2024-10-06 14:15:37 发布

无一尘染

最新推荐文章于 2024-10-06 14:15:37 发布

阅读量595

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46636333/article/details/121395654

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、Vue.js 是什么

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

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方网站：Vue.js

2、初始 Vue.js

创建demo.html

<!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">

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

            },
            //组件
            components: {

            }
        })
    </script>
</body>

</html>

在vs code中创建代码片段：

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

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!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\">",
			"",
			"    </div>",
			"    <script src=\"vue.min.js\"></script>",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            },",
			"            //方法",
			"            methods: {",
            "",       
            "            },",
			"            //组件",
			"            components: {",
			"",		
            "            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

注意：代码中的"Tab"键空格要换成"空格键"的空格

3、v-bind 指令

v-bind 用于绑定元素属性和数据，单向绑定

<div id="app">
    <h1 v-bind:title="ts">Hello,chen</h1></h1>

    <!-- 简写 -->
    <h1 :title="ts">Hello,123</h1>
</div>


<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ts:"大家好"
        }
    })
</script>

4、v-model 指令

v-model 双向绑定

<div id="app">
    <h1>{{test1}}</h1>
    <span>test1.</span><input type="text" v-bind:value="test1">

    <h1>{{test2}}</h1>
    <span>test2.</span><input type="text" v-model="test2">    
</div>


<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            test1:"yes",
            test2:"no"
        }
    })

当改变test1和test2中输入框的值时：

test2会随着input中的数据更新而更新，test1不会

5、事件

<div id="app">
    <img v-bind:src="result.site" v-bind:title="result.title" style="width: 100px;height: 70px;">
    <button v-on:click="test()">确定</button>
    <!-- 简写 <button @click="test()">确定</button> -->
</div>


<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            result: {}
        },
        //方法
        methods: {
            test(){
                alert("Hello,chen")
                this.result={
                    "title":"123456",
                    "site":"java_ico.png"
                }
            }
        }
    })

当按下确认按钮时：

提示框出来了！

图片和提示信息也出来了！

6、v-if 指令

<div id="app">
    <h1 v-if="flag">启动</h1>
    <h1 v-else>禁用</h1>
    <input type="checkbox" v-model="flag">切换</input>
</div>


<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            flag:true
        }
    })
</script>

当开启多选框时，显示启动；当关闭单选框时，显示禁用

7、v-for 指令

<div id="app">
    <ul>
        <li v-for="n in 5">{{n}}</li>
    </ul>

    <ul>
        <li v-for="(n,index) in 5">{{index}}-----{{n}}</li>
    </ul>

    <table border="1">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr v-for="user in userlist">
            <td>{{user.name}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>
</div>


<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userlist:[
                {name:"张三1",sex:"男",age:18},
                {name:"张三2",sex:"男",age:16},
                {name:"张三3",sex:"女",age:20},
                {name:"张三4",sex:"男",age:22},
                {name:"张三5",sex:"女",age:17}
            ]
        }
    })
</script>

8、组件

局部组件

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


<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        //组件
        components: {
            //组件名字
            'Navbar':{
                //组件内容
                template:'<ul><li>列一</li><li>列二</li><li>列三</li></ul>'
            }
        }
    })

全局组件

创建一个js文件，例如：Navbar.js

//js文件
// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>列一</li><li>列二</li><li>列三</li></ul>'
})

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


<script src="vue.min.js"></script>
<!-- 导入刚刚创建的js -->
<script src="Navbar.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            
        }
    })
</script>