Vue.js

                                                Vue.js

是一套构建用户界面的渐进式框架，只关注视图层，采用自底向上增量开发的设计。通过尽可能简单的API实现响应的数据绑定和组合的视图组件。我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

安装

旧版本：

            Cnpm install –global vue-cli

新版本：

            Cnpm install -g @vue/cli

或者 yarn global add @vue/cli

装新版本需要把旧版本卸载，npm uninstall vue-cli -g 或者 yarn global remove vue-cli

创建项目方式：

1.方法一

vue  init  webpack-simple demo1

cd  demo1

cnpm install

npm run dev

 

2.方法二

vue init webpack demo2

cd demo2

cnpm install  #如果创建项目的时候没有报错，这一步可以省略，如果报错了，cd 到项目里面运行(安装依赖)

npm run dev

 

新版本创建项目：(必须cd 到对应的一个项目里面)

  Vue create demo2

 运行：npm run serve

 编译：npm run build

vue cli是安装vue的脚手架，也是官方命令行工具，用于快速创建项目。

Vue构造器：需要实例化

构造器参数：

1.el:它是DOM元素中的id,意味着改动都在指定的div内，di外部不受影响

定义数据对象：

2.data：定义属性

<li v-for=”item in list”>

{{item}}

</li>

<li v-for=”(item,key) in list” :class=”{‘red’:key==0}”>    item 是项，key是索引值

{{key}}---{{item}}

</li>

绑定属性v-bind:src=”url”,

绑定html,v-html=”n2”

绑定数据的另一种方法 ：{{msg}}

v-text=”msg”

绑定style  v-bind:class

<div class="box" v-bind:style="{'width':boxwidth+'px'}">

我是一个div

</div>

<script>

Export default {

 Data() {

  Return {
  msg:‘你好vue’,

  Title:’我是一个title’,

  url:’ https://electronjs.org/docs/api’

  n2:’<h2>我是好</h2>’

  flag:true,

  boxwidth:300

  }
 }
}

</script>

 

css引入

<style lang=”scss”>



.red{

Color:red;

}

.blue{

Color:blue:

}

.box{

Height:100px;

Width:100px;

Background:red:

}

</style>

            双向数据绑定

                Mvvm    vue是一个mvvm的框架(M model;V view ;model改变View,view改变model),双向数据绑定必须在表单里使用。

<h2>{{msg}}</h2>
<input  type=”text”  v-model=’msg’>
<button  v-on:click=”getMsg()”>获取表单里的数据</button>
Export default{
Data(){/* 业务逻辑里面定义的数据*/
Return{
Msg:’你好msg’
}
},methods:{ /*放方法的地方*/
getMsg(){
 //方法里获取data里面的数据
Alert(this.msg)
}
}
}