欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

初识vue 学习分享

程序员文章站 2022-03-29 08:13:48
...

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

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