<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1.引入vue.js -->
<script src="./vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- 5.使用{{}}展示文本 -->
<p>{{msg}}</p>
</div>
<script>
// 2.创建一个vue实例,这个实例可以监管html代码
var vm = new Vue({
// 3.通过el属性指定vue实例监管范围,它的值是一个id
el: '#app',
// 4.通过data属性保存数据
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>
★配置用户代码片段
文件-首选项-用户代码片段-输入html
vue + tab
{
/*
// 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"
}
*/
"Vue": {
"prefix": "vue",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"\t<head>",
"\t\t<title>$1</title>",
"\t\t<meta charset=\"UTF-8\">",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\t\t<script src=\"./vue.js\"></script>",
"\t</head>",
"\t<body>",
"\t\t<div id=\"app\"></div>",
"\t\t<script>",
"\t\t\tvar vm = new Vue({",
"\t\t\t\tel: '#app',",
"\t\t\t\tdata: {",
"",
"\t\t\t\t}",
"\t\t\t})",
"\t\t</script>",
"\t</body>",
"</html>"
],
"description": "vue - Defines a template for a vue & html5 document"
}
}
1.框架和库的区别?
a.框架是一套完整的解决方案,对项目的侵入性大,如果需要更换框架,则需要重新架构整个项目;
b.库(插件),提供某一个小功能,对项目的侵入性小,如果某个库无法完成某个需求,可以很容
易切换到其他库实现需求;
2.MVC和MVVM的关系图解
MVC是后端的分层开发概念;
MVVM是前端视图层的概念,把前端的视图层,分成了三个部分,model.view,vmviewmodel(核心调度者)
M:保存页面中每个单独的数据;
VM:它是一个调度者,分割了M和V,V层想要获取和保存数据的时候,都要由VM做中间的处理;
V:每个页面中的HTML结构;
前端页面中使用MVVM的思想,主要是为了让我们开发更加的方便,因为MVVM提供了数据的双向绑定.
数据的双向绑定是由VM提供的;
3.Vue基本代码和MVVM之间的对应关系
el:指定要控制的区域;
data:是个对象,指定了控制的区域内要用到的数据;
methods虽然带了个s后缀,但是是个对象,这里可以自定方法;