vue入门

最新推荐文章于 2024-07-20 18:05:54 发布

做数学只会写解

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量381

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_53275320/article/details/137143899

版权

Vue 入门

1 初始Vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        {{message}}
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',//绑定vue作用范围
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

2 抽取vue代码片段

这个步骤类似于java 中将重复使用到的代码提取出来生成一个工具类。
操作步骤：点击文件->首选项->抽取用户代码片段->新建用户代码片段->编辑文件名称（以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"
	}
}

vue基本指令

v-bind

单向数据绑定，这个指令一般在标签中用于取值。

<div id="app">
        <h1 v-bind:title="message">
            {{content}}
        </h1>
        <!--简写方式-->
        <h2 :title="message">
            {{content}}
        </h2>
    </div>

v-model

双向数据绑定，绑定后，改变绑定位置的数据，所有引用数据的位置都会改变。

<body>
    <div id="app">
        <!-- v-bind:value只能进行单向的数据渲染 -->
        <input type="text" v-bind:value="searchMap.keyWord">
        <!-- v-model 可以进行双向的数据绑定  -->
        <input type="text" v-model="searchMap.keyWord">

        <p>您要查询的是：{{searchMap.keyWord}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '尚硅谷'
    }
}
        })
    </script>
</body>

事件

v-on指令绑定事件

<body>
    <div id="app">
        <!--绑定事件-->
        <button v-on:click="search">查询</button>
        <!--绑定事件简写-->
        <button @click="search">查询11</button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                search(){
                    console.log('search....')
                }
            }
        })
    </script>
</body>