我最近学习了js,取得进步,现在学习vue.
新手学习,请不要用mpn,太复杂了. 请直接下载应用vue.js文件就上手学习吧.
参照菜鸟教程网站的vue.js教程http://www.runoob.com/vue2/vue-start.html.
从基础开始理解和上手,请看我写的中文注释,帮助理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue一个简单例子的基础说明</title>
</head>
<body>
<div id="vue_det">
<!-- {{ }} 用于输出对象属性和函数返回值。 -->
<h3>site : {{site}}</h3>
<h3>url : {{url}}</h3>
<h3>alexa : {{alexa}}</h3>
<h3>{{details()}}</h3>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',//el 参数,它是 DOM 元素中的 id,这意味着我们在该div里面作业,外面不受影响,不会影响外面
data: {//data 用于定义属性,实例中有三个属性分别为:site、url、alexa。
site: "菜鸟教程",//这是一个属性site,其值是字符串"菜鸟教程"
url: "www.runoob.com",//同上
alexa: "10000"//这是一个属性alexa,其值是字符串"10000"
},
methods: {//methods 用于定义的函数,可以通过 return 来返回函数值。
details: function() {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
})
</script>
</body>
</html>复制代码