VUE整理
一、安装
独立版：
https://vuejs.org/js/vue.min.js，直接下载到本地，并引用
使用CDN方法
- Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
二、目录结构
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。n |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。A pp.vue: 项目入口文件，我们也可以直接将组这里，而不使用 components 目录。 main.js: 项目的核心文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
三、vue使用
- vue2.x
Vue 测试实例 - 菜鸟教程(runoob.com)
site : {{site}}
//{{ }} 用于输出对象属性和函数返回值。
url : {{url}}
{{details()}}
//当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
- vue.3.x
Vue 测试实例 - 菜鸟教程(runoob.com)
{{ message }} //{{ message }} 对应应用中 message 的值。
四、模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
1. 插值
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
{{ message }}
{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。
如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。
这个将不会改变: {{ message }}
Html
使用 v-html 指令用于输出 html 代码：
使用双大括号的文本插值: {{ rawHtml }}
//正常输出文本
使用 v-html 指令:
//html代码输出
2. 属性
HTML 属性中的值应使用 v-bind 指令。
对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。
3. 表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效:
{{ var a = 1 }}
{{ if (ok) { return message } }}
4. 指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
现在你看到我了
这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
另外还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
-
{{ site.text }}
5. 参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
...
...
...
在这里参数是监听的事件名。
6. 修饰符
修饰符是以半角句号 .指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
7. 用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
{{ message }}
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
8. 缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
v-on 缩写
9. 过滤器（2.x）
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
{{ message | capitalize }}
过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
{{ message | capitalize }}
过滤器可以串联：
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
五、条件判断
1. v-if
条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示。
因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在元素上，并在上面使用 v-if。最终的渲染结果将不包含元素。
2. v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
随机数大于 0.5
随机数小于等于 0.5
3. v-else-if
v-else-if 即 v-if 的 else-if 块，可以链式的使用多次
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
4.v-show
我们也可以使用 v-show 指令来根据条件展示元素：
Hello!
六、循环语句
v-for
循环使用 v-for 指令。
- v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
- v-for 可以绑定数据到数组来渲染一个列表
- v-for 还支持一个可选的第二个参数，参数值为当前项的索引:
-
{{ index }} -{{ site.text }}
v-for迭代对象
v-for 可以通过一个对象的属性来迭代数据：
-
{{ value }}
也可以提供第二个的参数为键名：
-
{{ key }} : {{ value }}
第三个参数为索引：
-
{{ index }}. {{ key }} : {{ value }}
v-for 迭代整数
v-for 也可以循环整数
-
{{ n }}
显示过滤/排序后的结果
我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。
Vue 测试实例 - 菜鸟教程(runoob.com)
- {{ n }}
v-for/v-if 联合使用
使用 v-for/v-if 给 select 设置默认值：(v-for 循环出列表，v-if 设置选中值：)
您选中了:{{selOption}}
在组件上使用 v-for
在自定义组件上，你可以像在任何普通元素上一样使用 v-for：在组件上使用 v-for
然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：
不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。
七、组件
- 组件（Component）是 Vue.js 最强大的功能之一。
- 组件可以扩展 HTML 元素，封装可重用的代码。
- 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
- 每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。
以下实例我们将 Vue 应用挂载到，应该传入 #app：
const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')
注册一个全局组件语法格式如下：
const app = Vue.createApp({...})
app.component('my-component-name', {
/* ... */
})
my-component-name 为组件名，/* ... */ 部分为配置选项。注册后，我们可以使用以下方式来调用组件：
// 创建一个Vue 应用
const app = Vue.createApp({})
注册一个 button-counter 组件，在每次点击后，计数器会加 1:
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: `
`
})
app.mount('#app')
组件的复用
你可以将组件进行任意次数的复用：
全局组件
以上的实例中我们的组件都只是通过 component 全局注册的。
全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。
局部组件
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
const ComponentA = {
/* ... */
}
const ComponentB = {
/* ... */
}
const ComponentC = {
/* ... */
}
然后在 components 选项中定义你想要使用的组件：
const app = Vue.createApp({
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。
Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop":
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
Prop 验证
组件可以为 props 指定验证要求。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
type 可以是下面原生构造器：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
type 也可以是一个自定义构造器，使用 instanceof 检测。
八、计算属性
计算属性关键词: computed。
原始字符串: {{ message }}
计算后反转字符串: {{ reversedMessage }}
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
原始字符串: {{ message }}
使用 computed 计算后反转字符串: {{ reversedMessage }}
使用 methods 计算后反转字符串: {{ reversedMessage2() }}
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('
');
document.write('url: ' + vm.url);