一丶 Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
二丶Vue.js的引用
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
三丶基本语法
1.声明式渲染
<div id="app">
{
{ message }}
</div>
//启动 new Vue({el:选择器(id,name,class都可以),template:模板内容,数据 data});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
输出
hello word
绑定元素
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
效果:
![f31b2fa6a5e3f06fbdfe1ab30ed5ded9.png](https://i-blog.csdnimg.cn/blog_migrate/9f15ac33487eecb58be4394cb85df01c.png)