初识vue 学习分享

学习分享(前端小学生,代码一般,互相学习哦)

假设你已了解关于 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指令

猜你喜欢

转载自www.cnblogs.com/Kong-shuai/p/11430574.html