let 块级 -->属于局部变量
const 声明常量不可以修改
(1).数组解构
var [a1,a2,a3] = [1,2,3](2).对象解构
varp={ name="xx", age= 23 } var{name,age} = p;格式
var 函数名 = (参数列表) => {函数内容}等价于一下代码
var 函数名 = function(参数列表){
函数内容
}
如果参数只有一个可以省略(),函数内容只有一句代码可以省略{}
var person ={ name= "Lily", <!--原始版本--> eat:function(food){ console.log(food) } <!--箭头函数--> eat1:food==>console.log(food) <!--箭头函数省略版--> eat2(food){ console.log(food) } }解构表达式+箭头表达式
var person = { name="Lily", age=24 } <!--原始版--> function hello(person){ console.log("hello"+person.name) } <!--解构+箭头--> var hi = ({name}) ==>console.log("hello" +name)Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
模块化是一种思想,这种思想在前端有多种规范常见的规范有commonJs(nodeJS),cmd/amd(可以在浏览器中使用),es6(可以在浏览器中使用).
模块化就是把代码进行拆分，方便重复利用
- export命令用于规定模块的对外接口，
- import命令用于导入其他模块提供的功能。
是一套用于构建用户界面的****渐进式框架****
轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
可以自己下载Vue相关文件从本地导入.下载Vue文件到本地，官方提供两个版本：
也可以使用NPM导入
执行npm install vue 或npm i vue(vue是组件名字)
挂载(el)分class类和id
每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。
/** * el:挂载 * #通过id * */ var app = new Vue({ el: "#app", data: { message: "hello vue" } }); /** * 通过类class挂载 */ var app1 = new Vue({ el: ".app1", data: { message: "hi vue" } });数据(data)
Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上
<div id="app"> <h1>{{message}}</h1> </div> ... <script> ... data: { message: "hello vue" } </script> ...方法(methods)
Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象
(1).方法可以直接在htm模板标签中使用
{{方法名字()}}由于vue的双重绑定,该方法会执行两次
(2).通过vue对象实例调用方法
.... var vue = new Vue({ .... methods:{ .... } }) vue.方法名();1、MVC模式：
Model： 数据模型，一些JavaScript 对象，比如
{name : "小小强",age : 16};View: 视图，网页中的内容，一般由HTML模板生成。
Controller : 控制器（路由），视图和模型之间的胶水。
2、MV VM模式：
Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。
View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。
ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；
语法
VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
简单表达式
可以进行简单的运算+,-,*,/等
<!--加法不会对字符串转义,其余都会自动将字符串转换成数据,如果解析失败解过就是NaN--> <div id="app"> <!--简单表达式 --> <h1>{{5+5}}</h1> <!-- +:运算，字符串连接 --> <h1>{{5+"v5"}}</h1> <h1>{{5+"5"}}</h1> <!-- -：减法 --> <h1>{{"5"-"5"}}</h1> <h1>{{5*5}}</h1> <!-- *:乘 --> <h1>{{"5"*"5"}}</h1> <!-- / 除--> <h1>{{5/5}}</h1> <h1>{{5/5}}</h1> </div> var app = new Vue({ //挂载到id=app元素上 el:"#app" }); 三目运算符在{{}}中的表达式可以使用data中数据
在{{}}中的表达式可以使用三元运算符,但是不能够使用其他语句
<div id="app"> <!--三目运算 --> {{ show1?"真":"假"}} </div> var app = new Vue({ el : "#app", data : { show1 : true } }); 字符串操作直接使用字符串字面值作为字符串对象
使用data中的字符串对象
<div id="app"> {{"这是字面值"}}<br/> {{"这是字面值".length}}<br/> {{message.length}}<br/> {{message.substring(1,5)}}<br/> {{message.substring(2,6).toUpperCase()}}<br/> </div> var app = new Vue({ el: "#app", data: { message: "这是data中的数据" } }); 对象操作在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样
<div id="app"> {{user}}<br/> {{JSON.stringify(user)}}<br/> {{user.toString()}}<br/> {{user.name}}<br/> {{user.age}}<br/> {{user.getAge()}}<br/> </div> var user = { name: "张三", age: 29, getAge: function () { return this.age }, toString:function(){ return "姓名:"+this.name+",年龄:"+this.age; } }; var app = new Vue({ el: "#app", data: { user: user } }); 数组操作在表达式中可以使用JavaScript数组中的任何语法来操作数组.
<div id="app"> {{hobbys}}<br/> {{hobbys[0]}}<br/> {{hobbys.length}}<br/> {{hobbys.toString()}}<br/> {{hobbys.join("------")}}<br/> </div> var app = new Vue({ el: "#app", data: { hobbys:["打游戏","踢足球",'泡MM',"泡GG"] } });指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
一个标签元素上可以出现多个指令属性
指令只能够出现在Vue对象所挂载的标签范围内的标签中
v-text
语法: <标签名 v-text=“表达式”></标签名>
如果值是html的值,会作为普通的文本使用。
标签中的属性值必须是data中的一个属性.
作用: 通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)
<div id="app"> <span v-text="message"></span><br/> <span v-text="user.username"></span><br/> </div> var app = new Vue({ el: "#app", data: { message: "<h1>这是一个Span!</h1>", user: { username: "lw" }, } });v-html
语法: <标签名 v-html=“表达式”></标签名>
作用:
通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)
注意事项:
如果值是html的值,不会作为普通的文本使用,要识别html标签。
{{表达式}} 可以插入的标签的内容中
v-text和v-html更改标签中的所有内容
<div id="app"> <div v-html="message"></div> </div> var app = new Vue({ el: "#app", data: { message: "<h1>这是HTMl代码</h1>" } }); v-for语法: <标签 v-for=“元素 in 数据源”></标签>
数据源: 数组, 元素: 数组中的一个元素,
数据源: 对象 元素: 对象中的一个属性名
<标签 v-for="(元素,索引|键) in 数据源"></标签> 当数据源是数组时, ()的第二个参数值索引 当数据源是对象时, ()的第二个参数值键
<标签 v-for="(元素,键,索引) in 对象"></标签>
作用: 基于数据源多次循环达到多次渲染当前元素.
<div id="app"> <h1>循环数组</h1> <ul> <li v-for="hobby in hobbys">{{hobby}}</li> </ul> <h1>遍历对象</h1> <ul> <li v-for="value in student">{{value}}</li> </ul> <h1>带索引循环数组</h1> <ul> <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li> </ul> <h1>带键遍历对象</h1> <ul> <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li> </ul> </div> var app = new Vue({ el: "#app", data: { hobbys : ["爬山","游泳","打豆豆","睡觉"], student : { name: "小毛", age: 29, sex: "男", }, num : 10, str : "itsource", } }); v-bind将data中的数据绑定到标签上,作为标签的属性.
语法: 为一个标签属性绑定一个值 <标签 v-bind:标签属性名字=“表达式”></标签> 简写形式: <标签 :标签属性名字=“表达式”></标签> 为一个标签绑定一个对象作为该标签的多个属性 <标签 v-bind=“对象”></标签>
注意事项 将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字
<div id="app"> <img v-bind:src="imgsrc" v-bind:title = "title"/> <img :src="imgsrc" :title = "title"/> <input v-bind="props"/> </div> var app = new Vue({ el: "#app", data: { imgsrc: "./img/1.jpg", title: "二哈!", props :{ type: "text", name: "username", } } }); v-model语法: <标签 v-model=“表达式”></标签>
在表单控件上创建双向绑定 表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中, 当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定 注意事项: 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定. 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显 v-model只作用于以下表单: input select textarea
<div id="app"> <h1>绑定到type=text的input表单元素</h1> 姓名:<input type="text" v-model="inputValue"><br/> data中的值:{{inputValue}} <h1>绑定到type=checkbox的input表单元素</h1> 打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/> 踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/> data中的值:{{checkboxValue}} <h1>绑定到type=radio的input表单元素</h1> 打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/> 踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/> data中的值:{{radioValue}} <h1>绑定到textarea的元素</h1> 个人简介:<textarea v-model="textareaValue"></textarea><br/> data中的值:{{textareaValue}} <h1>绑定到单选的select的元素</h1> 技能:<select v-model="skills"> <option value="java">java</option> <option value="php">php</option> <option value=".net">.net</option> </select><br/> data中的值:{{skills}} </div> var app = new Vue({ el: "#app", data: { inputValue: "初始化的值", checkboxValue: ["踢足球"], radioValue: "打篮球", textareaValue: "你是一个优秀的软件工程师!", skills: "java", } }); v-show语法: <标签名 v-show=“表达式”></标签名>
作用: 根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。 当v-show的值为假时, 会在标签的css中添加 display: none : 注意事项: 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除 标签的值会自动转换为boolean类型的值
<div id="app"> <div v-show="show">你看到我了!</div> <div v-show="hidden">你看不到我了!</div> <div v-show="score>=90">优秀</div> </div> var app = new Vue({ el: "#app", data: { "show":true, "hidden":true, "score":90, } }); v-if语法: <标签名 v-if=“表达式”></标签名>
作用: 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
注意事项: 当表达式中的值是false时, 是从页面上删除. 标签的值会自动转换为boolean类型的值
<div id="app"> <div v-if="show">你看到我了!</div> <div v-if="hidden">你看不到我了!</div> <div v-if="score>=90">优秀</div> </div> var app = new Vue({ el: "#app", data: { "show":true, "hidden":true, "score":90, } }); v-else语法: <标签名 v-if=“表达式”></标签名> <标签名 v-else></标签名>
作用: 当v-if表达式不成立时, v-else执行.
注意事项: 该指令必须也v-if搭配起来使用. v-else是一个单独的属性, 该属性是不要赋值的.
<div id="app"> <div v-if="isVip">欢迎欢迎!!</div> <div v-else>滚动!!</div> </div> var app = new Vue({ el: "#app", data: { isVip: true } }); v-else-if语法: <标签名 v-if=“表达式”></标签名> <标签名 v-else-if=“表达式”></标签名> <标签名 v-else-if=“表达式”></标签名> <标签名 v-else></标签名>
<div id="app"> <div v-if="score>=90">优秀!!</div> <div v-else-if="score>=70">良好!!</div> <div v-else-if="score>=60">及格!!</div> <div v-else="score<60">不及格!!</div> </div> var app = new Vue({ el: "#app", data: { score: 80 } });