vue知识点总结

methods方法（2种返回形式，第二种加反引号）
methods: { greet (){ // return ‘good night’+this.message; return good night ${this.message}; } }${ }识别属性，变量传参，methods: { greet (形参time){ // return ‘good night’+this.message; return good ${time} ${this.message}; } }在HTML里传实参，

{{greet(“night”)}}

2.v-bind动态绑定一个或多个属性，可修改v-bind:属性v-：指令3.

eg:jswebsiteTab="<a href=“https://www.taobao.com>taobao"html:

<p v-html=“websiteTab>4.events单击事件的两种形式：add a year<button @click=“sub–”>sub a year直接改变属性，调用方法 实现功能的改变：<button @click=“sub”>sub a year<button @click=“sub–”>sub a yearjs: methods: { sub(){ this.age++; } }5.事件修饰符，控制事件的发生 用法：事件.修饰符，或用事件调用方法 prevent:阻止默认事件6.键盘事件：v-on:keyupv-on:keydown加修饰符，表示按下那个键触发：~.enter7.v-model双向数据绑定 输入

{{name}}

输出js:声明name对象 v-model.lazy：延缓数据绑定，当鼠标焦点离开时才开始绑定8.ref,写在标签里，用$refs获取到ref的元素对象，9.watch 通过watch对当前数据监听，看当前数据的变化是什么样子的。watch: { new （Val,oldVal）{} }10.computed计算属性：当前属性发生变化后才会触发，适用于经常变换的样式，搜索等。method：会使方法都走一遍，不一定返回returncomputed: { 只有调用的方法发生变化，提升项目优化程度fangfa(){ return …} }；理解：computed用来监控自己的变量，该变量不在data中声明，直接在computed中定义就可以在页面中实现双向数据绑定，展示出结果。computed与methods的区别： computed 属性方法编写的逻辑运算，在调用时直接将返回时 areas 视为一个变量值就可使用，无需进行函数调用。methods 方法编写的逻辑运算，在调用时 add() 一定要加“()”。11.动态绑定2种方式：属性绑定 <div @click=“mrchangeColor=!mrchangeColor” v-bind:class= {changeColor:mrchangeColor}”> hello js:mrchangeColor=true;计算属性绑定js: data() { return{ mrchangeColor:false, mrchangLength:false };computed: { compclasses() { return{ changeColor:this.mrchangeColor, changLength:this.mrchangLength } }html:<button @click=“mrchangeColor=!mrchangeColor”>changeColor <button @click=“mrchangLength=!mrchangLength”>changLength

方法 hello

11.和if else if else用法一样,此时弱不符合条件所在标签都隐藏v-if=“boolean”;v-else-ifv-elsev-show=“boolean”;当为true，显示出来，标签还在12.v-for遍历数组，对象

• {{suibian}}
• 随便一个名字

• {{sin}}.{{suibian}

若数字是对象数组：js：character:[ {name:“peiqi”,age:3}, {name:“xiaoen”,age:4}, {name:“libika”,age:4} ]html:

• {{xinxi.name}}
• 可调用对象的 某个属性

如果遍历的是div，为避免多余的div标签的出现，可用template标签。遍历对象：js:users:[ {name:“peiqi”,age:3}, {name:“suxi”,age:4}, {name:“tuzi”,age:5} ]html: 从对象数组中得到的是对象user

在对象中得到属性和值

{{key}}-{{val}}

13.demoif end=false;为控制元素变幻的限度，加在js中，在标签中，为把它显示出来，加v-show=”!end";设置一个进度条(在js里设置一个health的值)：<div :style={width : health + “%”}>14.多个vue实例对象通过实例化第二个vue对象当中，修改第一个变量值15.全局API,可以在任何容器的实例中使用组件：component(“名字”，{对象”😕/html模板,反引号可以直接拼接html,template:``//属性 //方法})// 全局变量，所有都会变let o = { name:‘jfj’};//属性data(){ return o;},16.const 是用来申请定义常量的关键字，const 所指的是一块内存地址,至于可不可以改变就 涉及到引用类型和基础类型的内存分布问题,如果定义是数字、boolean 他是不可改变的,但是 定义时是个 Object 类型比如 :{ name:1 },他的 name 值可以改变。17.书写规范括号与括号之间，逗号相隔data(){ return{ } }18.请求数据API方法①Fetchconst todos = fecth(“http://jsonplaceholder.typicode.com/todos”); console.log(totdos);成功：.then失败：.catch②axiosaxios.get(link).then({})更简便，要从官网安装，参考视频https://ke.qq.com/course/452954?taid=393900040696047419.安装脚手架vue Cli脚手架需要的环境：node.js环境npm依赖包，很多插件，在npmjs.com中下载win-R：输入cmd，打开命令行工具，输入node -v(注意有空格)，npm -v看是否出现版本安装vueCli：https://cli.vuejs.org/zh/guide/installation.html拷贝 npm install -g @vue/cli到cmd，回车安装后输入cls,清除回到页面最顶端，输入vue --version检测是否安装安装cnpm 淘宝镜像：http://npm.taobao.org/复制使用说明后面的，安装，用cnpm --version 检测20.搭建项目pwd:当前路径ls or dir显示当前路径下包含的文件夹cd:改变路径，找到要跳转的路径cd 文件名/(输入一半名字，点击tab键自动补全)cd ~默认路径cd /根路径vue --help:显示创建项目的各种功能vue create vuecli-demo回车，回车，输入所生成的cd _,npm,得到2个网址，将第一个网址在浏览器打开。得到创建的项目启动：npm run serve 刷新页面，可以找到关闭：ctrl +c*2介绍目录：从c users leneve 找到文件夹所在路径，将文件夹从vs code里面打开，点击下方×，或按Ctrl+~找到路径按+启动多个终端按Ctrl，点击链接，跳转到浏览器README.md：当前项目启动安装的提示npm install 安装项目所需的依赖包npm run build 打包当前项目package.json,在项目中遇到的功能scripts{说明启动的方式}npm start(除了start，都需要加run)npm run serve/devpublic . ico 图标node- modules若无，启动不起来项目此时，需安装cnmp installaccess 放静态文件，css js 图片component：组件