1

Vue01:

目前正在使用的模板(snippet):

!v一键生成引入Vue.js !n 一键生成忽略提示(也可以在Vue.js里面设置)(已废弃,需要去vue.js的367行修改true为false使其全局生效)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{

"Vue,Start!":{
	"prefix":"!v",
	"body":[
		"<script type=\"text/javascript\"src=\"../JS/vue.js\"> </script>",
	],
	"description": "Vue.js oneclick import!"

}



	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	


}

23.11.4 21点10分

小白遇到的第一个问题:Vue的实例化

例子如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2023.11.4-初识Vue</title>
    <script type="text/javascript"src="../JS/vue.js">
    
    <!--创建一个Vue实例👇-->


const x =new Vue({
    el:'#root',     
    data:{name:'windy'}
})

    </script>
</head>
<body>
    
<!--准备好一个容器👇-->
<div id="root">
    <h1>Hello,{{name}}!</h1>
</div>





</body>
</html>

此时运行是无法让name值被读取到

小帮手提供的原因:

根据您提供的代码,问题可能是由于您在Vue实例化之前尝试访问name属性导致的。在Vue实例化之前,模板中的插值表达式{{name}}会被解析为undefined,因为Vue实例尚未创建。

要解决这个问题,您可以将Vue实例化的代码移动到模板之前,或者将模板中的插值表达式放在Vue实例化之后。

关于Vue的实例化:

Vue实例化是创建一个Vue应用程序的过程,它将Vue框架与特定的HTML元素(容器)进行绑定,使您能够使用Vue的功能和特性来操作和管理该元素及其子组件。

修正后的代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2023.11.4-初识Vue</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    
<!-- 准备好一个容器👇 -->
<div id="root">
    <h1>Hello, {{name}}!</h1>
</div>

<script type="text/javascript">
    // 创建一个Vue实例👇
    const x = new Vue({
        el: '#root',     
        data: {
            name: 'windy'
        }
    });
</script>

</body>
</html>

此时能够成功读出 插值表达式中name变量的内容. 哔哩哔哩 https://www.bilibili.com/video/av804122638 5/168