前端--vue框架

1、下载

查看已安装好的版本

-------渐进式的JS框架---------

vue是什么

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。

引入vue格式(网址引入)：

// 实例化vue对象
new Vue({
el:"#vue-app"
data:{
name:"miss wu"
}，
methods:{
},
watch:{
}

});

el:element 需要获取的元素，一定是html中的跟容器元素

data：用于数据的存储

methods:用于存储各种方法
watch:{}：数据监听

一个简单的实例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="styles.css" rel="stylesheet" />
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
  <h1>{{ message }}</h1>
    {{job}}
    <p>{{greet('today')}}</p>
</div>

<script src="app.js">
</script>
</body>
</html>

app.js

  var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
      job:'admin'
  },
      methods:{
      greet:function (time) {
          return 'Good'+'\n'+time+"!"+'....'+this.job
      }
      }
});

-----------------------

vue的属性和方法

双击鼠标事件：

模板指令： html和vue对象的粘合剂

数据渲染：v-text、v-html 、{{}}

控制模板 隐藏：v-if、v-show

渲染循环列表：v-for---展现之后第一行是apple，第二行是banana

事件绑定：v-on

属性绑定：v-bind

小结：

v-text="title"等价于{{title}}