前言
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
一、Vue的特点是什么?
1.轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
-
Vue.js 可以进行组件化开发,使代码编写量大大减少,开发者更加易于理解。
-
Vue.js 最突出的优势在于可以对数据进行双向绑定(在之后的编写中我们会明显地感觉到这个特点的便捷)。
-
使用 Vue.js 编写出来的界面效果本身就是响应式的,这使网页在各种设备上都能显示出非常好看的效果。
-
相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页面。
二、使用步骤
1.引入式
代码如下(示例):
<html>
<head>
<meta charset="utf-8" />
<title>Vue</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
2.编写简单的Vue语法
代码如下(示例):
<body>
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;
const x =new Vue({
el:'#root',
data:{
name:'Vue'
}
});
</script>
</body>
初学心得
初学Vue
1.要使Vue生效,必须要创建一个Vue实例化对象。
2.容器里混入了一些Vue的语法,不过依旧符合"html"规范。
3.一个Vue实例对象不能对应多个,否则的话相同的只能实现一个(自上而下),并且还
可以配合组件使用。
4.{{ }}里面要写"JavaScript"的表达式,且{{ }}里可以自动读取到data中的所有属性。
5.只要data中的数据发生改变,那么页面中的数据也会自动更新。