前端--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'+'
'+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}}

原文地址:https://www.cnblogs.com/foremostxl/p/10328373.html