vue的基本代码

Posted lujieting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的基本代码相关的知识,希望对你有一定的参考价值。

<!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>Title</title>
<!--1:导入vue-->
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<!--将来new的vue实例,会控制这个元素中所有的内容-->
<!--Vue 实例所控制的这个元素区域,就是我们的V-->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
//创建一个vue的实例
//当我们导入包之后,在浏览器内存中,就多了个vue构造函数
//注意:我们 new 出来的这个 vm ,就是我们 MVVM 中的 vm 调度者
const vm = new Vue({
el: ‘#app‘, //表示,当前我们new的这个vue实例,要控制页面上的哪个区域
//这里的data就是MVVM中的M,专门用了保存每个页面的数据的
data: { //date属性中,存放的是el中要用到的数据
msg: ‘欢迎学习Vue‘ //通过vue提供的指令,很方便就能把数据渲染在页面上,
// 程序员不再动手操作DOM元素了[前端的Vue之类的框架,不提倡我们去动手操作DOM元素]
}
});
</script>
</body>
</html>

以上是关于vue的基本代码的主要内容,如果未能解决你的问题,请参考以下文章

vue系列1:如何定义一个基本的Vue代码结构

Vue基本代码

凡尘---vue项目打包---基本使用---vue

Vue学习-组件的基本使用(局部组件)

Vue的一些基本指令

Vue-Router