初识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指令

转载于:https://www.cnblogs.com/Kong-shuai/p/11430574.html