web基础之Vue

web基础之Vue
官网https://cn.vuejs.org/v2/guide/index.html

Avue:https://avuejs.com/doc/installation

是一套用于构建用户界面的渐进式框架
- 使用 Virtual DOM
- 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
CDN
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```
.MVVM 模式的实现者——双向数据绑定模式

Model：模型层，在这里表示 JavaScript 对象

View：视图层，在这里表示 DOM（HTML 操作的元素）

ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

虚拟dom和diff算法（vue速度快的原因）

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
```
var vm = new Vue({})
```
插值表达式

插值表达式的作用是在View中获得Model中的内容

1.插值表达式
<div id="app">{{title}} {{[1,2,3,4][2]}}
{{ {"name":"xiaoyu","age":20}.age }}
{{ sayHello()}}

new Vue({

el:"#app",

data:{

title:"hello world!"

},

methods:{

sayHello:function(){

return "hello vue";

}

}

});
2.MVVM双向数据绑定：v-model

<div id="app"> <input type="text" v-model="title" /> </div>

3.事件绑定: v-on

<input type="text" v-on:input="changeTitle" />

v-on叫绑定事件，事件是input，响应行为是changeTitle。也就是说，当input元素发生输入事件时，就会调用vue

里定义的changeTitle方法

event.target.value == 当前事件的对象（input元素）的value值注意：此时的this指的是当前vue对象。

所以：如果在method里要想使用当前vue对象中的data里的内容，必须加上this.

changeTitle:function(event) { this.title = event.target.value; }

4.事件绑定简化版：使用@替换v-on:

<input type="text" @input="changeTitle" />

5.属性绑定： v-bind

html里的所有属性，都不能使用插值表达式

<a href="{{link}}">baidu</a> new Vue({ el:"#app", data:{title:"hello world!", link:"http://www.baidu.com" },

上面的这种做法是错误的，可以使用绑定属性绑定来解决：

要想在html的元素中的属性使用vue对象中的内容，那么得用v-bind进行属性绑定

<a v-bind:href="link">baidu</a> 可以缩写成冒号 <a :href="link">baidu</a>

6.v-once指令

指明此元素的数据只出现一次，数据内容的修改不影响此元素

<p v-once>{{titile}}</p>

7.v-html

就好比是innerHTML

<p v-html="finishedlink"></p>

new Vue({ el:"#app", data:{title:"hello world!", link:"http://www.baidu.com", finishedlink:"<a href='http://www.baidu.com'>百度</a>" },

8.v-text

纯文本输出内容

<p v-text="finishedlink"></p>
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
```
<div id="app">
  {{ message }}
</div>
```
```
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

不再和 HTML 直接交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制
```
除了文本插值，还可以像这样来绑定元素 attribute：
```
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
```
```
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
```
鼠标悬停几秒钟查看此处动态绑定的提示信息！
v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute

<span v-bind:title="message">
```
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
<button v-on:click="reverseMessage">反转消息</button>
```
vue中的语句
1.分支语句
v-if
v-else-if
v-else
v-show: 实际上是让该元素的display属性为none,隐藏的效果。所以性能更好
<div id="app"><p v-if="show">hahah</p> <p v-else>hohoho</p> <p v-show="show">hehehe</p> <input type="button" @click="show=!show" value="dianwo"/> </div> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script> new Vue({ el:"#app", data:{show:false } }); </script>
循环语句

vue中只有for循环
<body> <div id="app"> <ul> <li v-for="str in args"> {{str}} </li> </ul> </div> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script> new Vue({ el:"#app", data:{args:["a","b","c","d"] } }); </script> </body

改进版：for语句里，key建议加上，作为标识.i是下标
```
<ul>
<li v-for="(str,i) in args" :key="i"> {{str}}{{i}} </li> 
</ul>
```
- 组件（可以反复使用，方便快捷）
  在 Vue 中注册组件component
```
/ 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})
现在你可以用它构建另一个组件模板：
```
```
<ol>
  
  <todo-item></todo-item>
</ol>
```
```
 
```
但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。

我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：

组件部分为：
```
Vue.component('todo-item', {
  // todo-item 组件现在接受一个 "prop"，类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
```
完整如下
```
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})
```
```
<div id="app-7">
  <ol>
    
    <todo-item     //之前定义的组件 所以直接用，并且是需要一个参数的'todo',所以我们需要绑定一个，即bind
即我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
```
尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。

我们现在可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。

一个页面中只有一个div，其他的都是vue组件

vue组件里的data必须使用function的形式对{}对象进行封装，防止对其他数据的修改。注意，template里必须有

一个根节点。
```
<meta charset="UTF-8">
 <title>component</title> </head>
 <body>
<div id="app1"> 
<my-cap></my-cap> 
</div>
 <div id="app2"> 
</div>
 </body> 
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
 <script> 

new Vue({ 
el:"#app2", 
template:"<div>aaa</div>"
 }); 
```
```
new Vue({ 
el:"#app1"
 }) 
```
```
Vue.component("my-cap",{ 
data()
{ 
return { 
status:"hellllllllo" 
} 
},
template:'<p>{{status}}<button @click="changebtn">btn</button></p>',
methods:{ 
changebtn:function(){
 this.status = "enennnnnnn" } 
}
 }); 


</script>
```
改进版：提高了代码的重用性——万物皆组件（本地注册cpmponents）
var cmp = { data(){ return { status:"hellllllllo" } }, template:'<p>{{status}}<button @click="changebtn">btn</button></p>', methods:{ changebtn:function(){ this.status = "enennnnnnn" } } } new Vue({ el:"#app1", components:{ "my-cap":cmp } }) new Vue({ el:"#app2", components:{ "cap":cmp } })
数据与方法

它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
```
// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})
```
```
// 获得这个实例上的 property 类似于属性，然后直接调用
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
```
除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：
```
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})
```
实例生命周期钩子

created， mounted、updated 和 destroye

计算属性computed（是一个属性，缓存里面，不变值）

基础例子
```
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
```
```
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
```
结果：
Original message: "Hello"

Computed reversed message: "olleH"

==============================

第一个VUE-cli

(整个过程最后以管理员身份运行。）

下载nodeJs安装，再安装nodeJs淘宝镜像加速器

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境

Node 是一个让 JavaScript 运行在服务端的开发平台

而npm就是一个nodejs命令 -g全局安装

详细步骤

下载安装node.js https://nodejs.org/en/download/

在node.js的cmd组件（command prompt）中安装vue-cli
创建vue项目文件夹并打开

mkdir d:/vuedemo cd d:/vuedemo

使用vue list命令查看当前可用的vue骨架

使用vue命令创建基于vue-webpack-simple骨架的项目,vue-cli-demo是项目名，过程中需要输入一些参数，

回车是使用提示的值

vue init webpack-simple vue-cli-demo

创建基于webpack骨架的项目

vue init webpack vue-cli-demo

过程截图

淘宝镜像，以后网卡就可以用cnpm代替npm
并且nmp路径如上

安装vue-cli

这一步完成后就会发现C:Program Files odejs ode_modules多了一个vue-cli文件夹并且里面有一个node_moudles

这时候查看一下，就有这些方式存在了，

而我们通常选择webpack打包方式

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，

找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），

并将其转换和打包为合适的格式供浏览器使用。

入门https://www.runoob.com/w3cnote/webpack-tutorial.html

官网https://www.webpackjs.com/concepts/

为什么这里的vue需要webpack,这是因为vue是支持es6的而很多浏览器还是es5所以需要降级等操作，需要webpa ck

看看实际操作截图

然后按照提示进入项目，而这里的npm install提示类似于后端的下载依赖，所以前端下次又引入了包或者依赖又需要nom install一次

也可以用cnpm install

下载完成后看目录多出一个node_moudles，这个就是存放本地依赖的地方

然后写vue项目比较容易出现的知识点

1组件

局部组件

<script>

//内部注册

import Footer from "Footer.vue"

import Header from "Header.vue"

import Content from "Content.vue"

export default {

components:{

"app-footer":Footer,

"app-header":Header,

"app-content":Content

}

}

</script>

全局组件

import Home from './Home.vue';

Vue.component("appHome",Home);

2传参

下面看看父传子

下面看看子传父、（可以理解为子传参数 Pops是为了确定类型，像Java里的声明一个方式，或者属性然后在父中实现即java中的实现类）
<script>

//内部注册

import Footer from "Footer.vue"

import Header from "Header.vue"

import Content from "Content.vue"

export default {

components:{

"app-footer":Footer,

"app-header":Header,

"app-content":Content

}

}

</script>
相关阅读:
eclipse配置自动提示EXTJS和jQurey
Java用jdom.jar解析读取XML文件信息
 Hibernate配置XML连接数据库
 【codeforces】ZeptoLab Code Rush 2015 E 跳跃表? D kmp还不错的题
 各种语言版本的输出本身源代码的程序
 原地归并排序
 c/c++ static
【程序员的自我修养——链接、装载与库】笔记
 【清华大学OS公开课】
学习需要记录才行啊
原文地址：https://www.cnblogs.com/yangj-Blog/p/13044780.html

数据与方法

实例生命周期钩子

计算属性computed（是一个属性，缓存里面，不变值）

基础例子

什么是Webpack