vue之入门、创建代码片段、单向绑定指令

最新推荐文章于 2024-01-21 14:04:42 发布

java能飞翔

最新推荐文章于 2024-01-21 14:04:42 发布

阅读量274

点赞数

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

本文链接：https://blog.csdn.net/qq_40732959/article/details/124419023

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue学习

最近项目里用到了vue，现在再复习一下

vue入门案例

<!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>
    <!-- 引入vue相关js文件 -->
    <script src="vue.min.js"></script>

    <div id="app">
        <!-- {{}} 是插值表达式，作用是绑定vue中data里的数据 -->
        {{test}}
    </div>

    <script>
        new Vue({
            // 绑定vue的作用范围
            el:'#app',
            // 定义页面中显示的模型数据
            data:{
                test:"测试信息"
            }
        });
    </script>
</body>
</html>

创建代码片段

可以在vscode中创建代码片段，这样可以将代码模板用简单的几个字符就能实现，简化开发
文件-首选项-用户片段
新建全局代码片段文件
vue模板代码片段：

{
	"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"
	}
}

在代码编写过程中，使用vuehtml这个前缀即可

单向绑定指令

v-bind: 常用在属性上简写是一个冒号

<body>
    <div id="app">
        <h1 v-bind:title="test">标题1</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                test:"测试"
            }
        })
    </script>
</body>