学习分享(前端小学生,代码一般,互相学习哦)
假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识,如果刚开始学习前端开发直接学习框架可能不是一个很好的主意,接下来就开始吧!
1.下载vue.js库引用
(1 GitHub下载 https://github.com/vuejs/vue
(2 bootcdn上搜索引用即可
2. 创建视图范围,表示此范围内部都是由Vue解析而来
<div id="app"> {{ message }} </div>
3.通过 new Vue实例化一个vue对象
<script>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })</script>
此时页面显示: Hello Vue!
释义:
el 不知到大家还记得document.getelementById...这句话,el就是选择器的意思
data里可以写变量;用时 将变量message放在#app内的双花括号内即可
修改data中的变量message,会同步显示的页面中。
小贴士!
插值表达式
使用双花括号来包裹js代码构成差值表达式,作用是将花括号内的数据替换成对应属性进行展示
基本用法:JSON数据,数字,字符串,插值表达式都可以写入,不止hello Vue呦。
实例:字符串:{{"message"}} 数字:{{10}} ‘简单’数值运算{{10+20}} 字符串拼接:{{"hello"+message}}
下一章 vue指令