javascript以及vue.js复习

JavaScript 局部作用域

变量在函数内声明，变量为局部变量，具有局部作用域。

局部变量：只能在函数内部访问。

JavaScript 全局变量

变量在函数外定义，即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。针对变量类型使用 var 声明的变量可以在相同的作用域内重复声明，而使用 const 声明的变量则不能，如果在函数中声明变量不指定类型，则默认为全局变量，若指定var类型则为局部变量。const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改，使用 const 定义的对象或者数组，其实是可变的。比如创建常量对象：const car = {type:"Fiat", model:"500", color:"white"}; 修改属性: car.color = "red";   let 声明的变量只在 let 命令所在的代码块内有效。

字符串

var carname = "Volvo XC60"; 或者var carname = 'Volvo XC60';你可以使用索引位置来访问字符串中的每个字符：var character = carname[7]; 字符串的索引从 0 开始，这意味着第一个字符索引值为 [0]，第二个为 [1]，以此类推。

字符串 "We are the so-called " 被截断。如何解决以上的问题呢？可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号，如下:"We are the so-called \"Vikings\" from the north."反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。模版字符串中反引号的使用：JavaScript 中的模板字符串是一种方便的字符串语法，允许你在字符串中嵌入表达式和变量。模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量。同时还有模板字面量是用反引号（`）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。

在javascript中，break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。在java和JavaScript中return更多是终止函数方法执行，如果在函数方法中包含for循环，是返回值和结束函数执行。类型转换直接使用相应的方法就可以把里面的值转换为所使用的方法对应的类型。Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值。

正则表达式：在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。代码实例： var str = "VisitRunoob!";   var n = str.search(/oob/i);  他会在字符串str中匹配与oob相等的起始位置值，最后输出n=8。

javascript中this关键字，面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

JavaScript 异步编程

同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。更多是结合Ajax来使用，就是不刷新整个页面而显示，JavaScript Promise：Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。JavaScript Promise | 菜鸟教程

htmlDOM(文档对象模型):当浏览器网页加载时，浏览器会创建页面的文档对象模型（Document Object Model），用来将标记性文档封装成对象，并将标记性文档中的所有内容（标签、文本、属性等）都封装成对象，封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容。

在html中，按照从上到下，从左到右，在执行过程中遇到script时，浏览器停止HTML解析并开始执行JavaScript代码，如果script的内容引用了后面的内容，他将不会显示相关内容。script后面的相关还没有解析。

在JavaScript中更多是操作html中的dom从而操作事件，JavaScript HTML DOM 事件 | 菜鸟教程

JavaScript 中的所有事物都是对象。

vue.js

Vue.js 教程 | 菜鸟教程

在vue.js中有两种方式可以创建和实例化vue，一个是html本页面显示，

<script>

new Vue({ el: '#app', data: { message: 'Hello Vue!' } });

</script>其中el: '#app'是id定位，

另一个是组件化显示

<script>

export default { name: 'MyComponent', // 组件名，通常用于自定义标签名。

data() { return { message: 'Welcome to My Component!' } // 在组件内部定义数据和方法。 } } </script>

vue.js模版语法

使用 v-html 指令用于输出，如果string类型的数据中有页面标签，能够直接把标签去掉后内容输出到html页面。在 Vue.js 中，$ 前缀通常用于表示一个方法或属性是 Vue 实例的方法或属性，$ 是 vue的命名规则，增强区分的，来说明这是内置的实例方法属性，v-on 指令，它用于监听 DOM 事件。在vue.js中缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

在vue.js中还有链式使用v-else-if，就是相当于可以多次使用v-else，例如<div v-else-if="type === 'B'">

在vue.js中有一个计算属性computed，跟method很像，就是在里面定义函数方法。

在vue.js中有个监听属性watch，我们可以通过 watch 来响应数据的变化，比如
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

vue.js中的表单数据双向绑定，v-model可以加上修饰符.lazy，.number，.trim   等例如：

<input v-model.lazy="msg" >

组件

1.在vue.js中注册组件主要是在script标签中加入 Vue.component(tagName, options)，其中tagName是组件名，options是具体想要实现的功能或方法，这个是在vue的new实例之外，是全局组件，而在实例之内声明注册，components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }这是局部组件。

2.prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。在定义子组件时加入props: ['message'],这个是写在类似options具体实现中。

路由

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。Vue.js 路由 | 菜鸟教程

Ajax

在vue.js中，使用axios来实现Ajax，Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。