写在前面的:
首先,作为一个android开发,我确实是冲着vue能开发app来学习vue的;<br>
其次,在学习vue没多久就发现其实不是太难;<br>
再次,我确实刚入门,一方面,上班很忙,下班时间也不多,一方面也是为了能更深刻的学习,才开始写一些demo(仅仅简单的demo),争取每天都有demo发表;<br>
最后,我还是衷心希望我的粗浅的博客能对别人有一些作用。
第一天仅为一个很简单很入门的demo(仅一句输出):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>secondvue</title>
</head>
<body>
<div id="app">{{hello}}</div>
<!-- built files will be auto injected -->
</body>
<!--此处是引入vue,当前demo仅为一个单独页面的引入,一般完整项目可以用<script src="./dist/vue.js"></script>进行引入,此处不能省略-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script >
<!--声明一个渲染-->
new Vue({
<!--el为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。这里是id为app的元素-->
el:'#app',
<!--data:Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。一般来说,就是数据源-->
data:{
hello:'my name is vue.js'
}
})
</script>
</html>
解释:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
此处是引入vue,当前demo仅为一个单独页面的引入,一般完整项目可以用
`<script src="./dist/vue.js"></script>`进行引入,此处不能省略。<br>
`el`<br>
el为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。这里是id为app的元素。<br>
`data`<br>
data:Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。一般来说,就是数据源。