前言
首先在学习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" } }
将这段代码复制进去，在输入vue回车就可以正常使用了
