01Vue基础之模榜语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_46625500/article/details/131557278

个人名片：
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：python学不会123
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 暑假学完vue，复习html+css+js

文章目录

前言

首先在学习vue之前在vue官网（vue官网教程l）中学习如何安装vue及安装好Vue Devtools,方便后续在控制台中查看报错

1.创建vue实例

1.必须先创建vue实例，并且需要传入配置对象
2.root容器中的代码必须符合html规范
3.root容器中中的代码被称为vue模板
4.一个vue容器对应一个实例

<!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello  World  .{{name}}</h1>
        <h1>年龄：.{{age}}</h1>
    </div>
    <script>
        //组织vue在启动时生成提示
        Vue.config.productionTip=false 
        //创建vue实例
       new Vue({
            el:'#root',//el用于指定当前Vue实例为那个容器服务，值通常为css选择字符串
            data:{//data用于存储数据，数据供el所指定的容器使用
            name:'你好',
            age:187
            }
        })
         </script>

注意：不要忘记引入 <script src="../js/vue.js" type="text/javascript"></script>
不然会报错

2.模板语法

vue模板有2种语法：
1.插值语法：
功能：用于解析标签体内容
写法：{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性
2.指令语法：
功能：用于解析标签(包括标签属性、标签体内容，绑定事件…)

<div id="root">
        <h1>插值语法</h1>
        <h3>你好 {{name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">打开计时器</a>
    </div>
    <script>
        Vue.config.productionTip = false//组织vue在启动时生成提示
        new Vue({
            el: '#root',
            data: {
                name: 'jack',
                url:'./计时器.html'
            }
        })
    </script>

##3. 什么是MVVM？

MVVM ：
view:视图层
Model:数据层
VueModel:视图模型层
options对象：
el:
类型：string| HTMLElement
作用：决定之后的Vue会管理那个dom
data:
类型：Object|function(组件中data必须是一个函数)
作用：Vue实力对应的数据对象
methods:方法
类型：{[key:string]:Function}
作用：定义属于Vue 的一些方法，可以在其他地方调用，也可以在指令中使用

在这里插入图片描述

4.一键生成vue实例代码

1，首先打开vscode在文件中有个首选项点击配置用户代码片段

 {
	// Place your vue-basic 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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:
		"Vue": {
			"prefix": "vue",  //触发代码片段的关键词 输入vue按下tab回车键即可 可以更改！！
			"body": [
				"<!DOCTYPE html>",
				"<html lang=\"zh-CN\">",
				"",
				"<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>",
				"    <script src=\"../js/vue.js\"></script>",
				"</head>",
				"",
				"<body>",
				"    <div id=\"app\"></div>",
				"    <script>",
				"        new Vue({",
				"            el: '#app',",
				"            data: {$1},",
				"            methods: {$2}",
				"        });",
				"    </script>",
				"</body>",
				"",
				"</html>",
			],
			"description": "vh components"
		}
	
}