vue入门 vue入门

1.ES6语法 1.1 let与const

let是声明块级变量，作用域某个代码块中，离开代码块失效！

报错：i is not defined

const是声明一个常量，一旦赋值就不能更改！

1.2 解构表达式

解构数组

let array = [1,2,3]; let [a,b,c] = array; console.debug(a,b,c)

将数组中的值取出来赋给a、b、c

解构对象

const person = { name:"迪迦", age:100 } let{name,age} = person; console.debug(name+"---"+age) //把对象作为参数传递 function say({name,age}) { console.debug("---"+name+"---"+age) } say(person)

解构对象要使用{ }
1.3 箭头函数

? var 函数名 = (参数列表) => {函数内容}
? 等价于
? var 函数名 = function(参数列表){
? 函数内容
? }

如果参数只有一个可以省略(),函数内容只有一句代码可以省略{} , 没有参数不能省略（）要占位！
箭头函数this是属于当前创建环境this是一致的
如果箭头函数外面还有函数，那箭头函数的this是和外层函数this一致，如果外层没有函数，该this就是window!
所以如果要在箭头函数中使用this则要小心！

let sayLove = name => console.debug("love"+name); sayLove("云");

1.4 Promise对象

2. vue的导入 Node.js：他是可以用JavaScript 开发服务器代码！
npm是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架！相当于后台中maven！
使用npm的方式引入vue.js

安装node.js，其内置了npm
idea中安装node.js插件
使用npm下载vue.js

Npm常用命令：

创建前端项目初始化：npm init -y(跳过) -----相当于建了一个maven工程
安装模块：
全局安装(所有项目都能用)
npm install -g vue
npm -g root 安装路径
局部安装(当前项目使用)
npm install/i vue
查看模块：
查看某个模块：npm list vue
列表模块：npm ls
卸载模块：npm uninstall vue
更新模块：npm update vue
运行工程：npm run dev/test/online
编译工程：npm run build

3.vue的使用 3.1 vue是什么？
它是一个基于双向绑定的前端框架，双向绑定就是如果数据变化，界面也会变化，界面变化，数据也会随之变化！
MV VM模式
M：model 准备数据
V：view 渲染试图
VC：viewModel 视图模型
3.2 简单使用
导入vue的核心库之后，使用其内置对象vue

{{name}} {{age}}

el：主要用来指示挂载的dom！只要是在该挂载的dom下都可以取到值！
- id选择器
el:"#myDiv",
- 类型选择器
el:".cdiv",
- 标签选择器
el:"span",

不能同时挂载多个节点，且每个选择器只能挂载一个dom，如果挂载了多个，只会有一个取到值！建议使用id选择器来确保唯一性！
如果要在dom外取值：vue.name

data：用于准备数据

var vue = new Vue({ el:"#myDiv", data:{ msg:"测试", show(){ console.debug("this is show method"); }, person:{ name:"feng", sex: "23", } } })

{{msg}} {{show()}}{{person.name}}

methods：当前vue实例中所有的方法都放在其中！不应该放在data中，即使也可以！

{{msg}} {{show("小明")}}{{person.name}}

vue表达式

{{num1}} + {{num2}} = {{num1+num2}} {{num1}} - {{num2}} = {{num1-num2}} {{num1}} * {{num2}} = {{num1*num2}} {{num1}} / {{num2}} = {{num1/num2}} {{num1}} % {{num2}} = {{num1%num2}} {{sex?'男':'女'}}

操作字符串

胡须表达式可以调用对等类型的方法！

{{str}} {{str.substring(2,4)}} {{str.substr(4,2)}}

substring截取字符串，左闭右开！
substr（a，b）从a开始（包括a）处截取，共截取b位！
3.3 vue指令

v-text=“表达式” 设置标签中的文本

在指定的标签设置值，如果设置的代码有html，则会以纯文本的方式展示！

v-html=“表达式” 设置标签中的html

在指定的标签设置值，如果设置的代码有html，则会被浏览器所解析！

v-for=“表达式” 循环

【vue入门】语法:
<标签 v-for="元素 in 数据源">

数据源:数组, 元素:数组中的一个元素, 数据源:对象元素:对象中的一个属性名

<标签 v-for="(元素,索引|键) in 数据源">
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键
<标签 v-for="(元素,键,索引) in 对象">
作用:
基于数据源多次循环达到多次渲染当前元素.
在vue中可以循环迭代的元素：数组、字符串、对象、整数

{{n}}--索引--{{i}} {{s}}--索引--{{i}} {{a}}--索引--{{i}} 属性{{o}}--值{{k}}--索引--{{i}}

只有对象有三个参数，属性和值和索引！

v-bind指令

将data中的数据绑定到标签上,作为标签的属性！
为一个标签属性绑定一个值:
<标签 v-bind:标签属性名字="表达式">

文章图片

简写形式:
<标签 :标签属性名字="表达式">

文章图片

为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind="对象">

v-model
在表单控件上创建双向绑定,
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定!
<标签 v-model="表达式">
如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
v-model只作用于以下表单:
input select textarea

input标签

{{text}}男女 {{radio}}唱歌跳舞看书 {{checkbox}}
select标签

--请选择-- 广东西藏新疆
textarea标签

v-if
<标签名 v-if="表达式">
<标签名 v-else-if="表达式">
<标签名 v-else-if="表达式">
<标签名 v-else>
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

60&&age<=100">老年了 30&&age<=60">中年 18&&age<=30">青少年了 =0&&age<=18">儿童非正常年龄

v-on
绑定事件：
可以写表达式或触发函数！

{{num}}

触发函数：只有方法名，没有“（）”
v-show: 控制标签属性,显示还是隐藏
<标签名 v-show="表达式">
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效！
当v-show的值为假时, 会在标签的css中添加 display: none

≧???≦?

methods:{ show(){ console.debug(this.isShow) this.isShow=!this.isShow } }