bestvike study5 --正式学习vue2.0

后端生态：

表现层 ：（前端请求地址和后端一些url）strust2 springMvc
持久层:持久化数据，跟数据库交互 mybatis
核心层：spring

基础–前端生态：

vue.js
vue-cli(脚手架）
vuex（前端缓存）-（ocal存着 session会消失）
vue-router（关键组件） ----以上三个时vue整个生态的（他本来有一个自带的后端请求

axios（ajax）-----这个不是形成前后端分离的架构

package.json :^和*下载最新版本
脚手架生成src文件

模板引擎

：jsp(<c ； thymleaf（<th–spring boot推荐的模板引擎，与其天生兼容

特点：

双向数据绑定，组件化，dom:html元素，虚拟dom，MVVM

MVVM：

model --数据 数据改变试图也会改变
view --视图 视图改变数据也会改变
modeview–vue实例

vue的作用域：

const定义一个vue实例，el=“# app”绑定了作用域----对应i一个div id=“app” ；
mustache语法 {{}}：
里面可以计算，三元运算，也可以用一些javascript语法。
一般情况下后端传过来一个json对象数据，前端可以渲染出来展示
vue实例属性：el，data，methods；this指的是vue实例

标签：

v-text（相当于dom中的innerText）： 会把原有的替换掉，只显示v-text的内容；没有插值闪烁（{{}}有）
v-html（相当于dom中的innerHtml）：会把原有的替换掉…所以里面别写东西了
v-bind:动态绑定，语法糖-简写就是：。比如说a元素的href或者img的src
class和style支持数组和对象：（class是和id类似，可以通过它对他进行一些操作，比如说设置css样式；id相当于主键）
class可以通过绑定对象的方式，{a：true},true就显示class，f就不显示；绑定数组：[a:true]
v-on:绑定事件，语法糖-简写就是@。可以传参数。
@click=''btnclick(“111”)"对应vue实例中methods中(两种方式写函数）:①btnclick:function(message){ alert(message)}；②btnclick（）{}
也可以直接将函数写在事件中 @click=“count++”
注：js中可以不加分号，js中没有泛型，ts中有泛型
v-model:通常绑定在input或者select中，实现双向绑定mvvm，
相当于把v-bind和v-on合起来，：value=…将监听事件中的数据放入到input和@input=name，监听了一个事件input，
v-if： 如果没有就彻底删除这个元素，适当的销毁和重建，如果确定了元素很少改变就用v-if。
有一个key的概念，把dom元素会虚拟到渲染函数，通过js的render渲染函数写html，会到虚拟dom树。之前的jquery之能全部重建，vue有key相当于有个id，只对一个虚拟dom可以定位到node在哪，更高效
**v-show：**都会被渲染，如果需要频繁的切换，可以用这个
v-for:遍历数组遍历对象，value,key, index, 遍历对象少一些，主要遍历数组；有个id的概念，在脚手架中会不加key（:key=user.id)会报警告，在数据库中就是主键
**v-cloak:**解决插值闪烁

模板字符串：

当需要同时输出变量与字符串的时候
名字：${name},年龄：${age}

快捷键：

ctrl alt l：美化界面
ctrl alt：复制
.log：输出

声明变量：

let:有作用域，
const：有作用域，不可变
var：全局作用域，相当于没有作用域，变量提升（有风险，不会报错，后续的人可能不知道错误或者存在的问题），

对数组的处理

filter:

let newArr=arr.filter(item=>item>5) 函数简化

map

map和filter都是数组方法，它们用于处理数组，但它们的目的和返回的结果不同。
相似之处：

• 它们都是数组实例方法，意味着它们可以直接应用于数组对象上。
• 它们都接受一个回调函数作为参数，这个回调函数会被数组中的每个元素调用。
• 它们都返回一个新数组，不会修改原始数组。
  区别：

1. map方法：
   • map会遍历数组中的每个元素，回调函数返回的结果会组成一个新的数组。
   • 它总是返回一个新数组，即使回调函数没有返回值，也会返回一个包含原数组所有元素的数组（undefined不会被包含在新数组中）。
   • map通常用于提取或转换数组中的数据，当你需要用到数组中的每个元素生成一个新的数组时。
     示例：

   const numbers = [1, 2, 3, 4, 5];
   const squares = numbers.map(number => number * number);
   console.log(squares); // 输出：[1, 4, 9, 16, 25]
   

2. filter方法：
   • filter也会遍历数组中的每个元素，但回调函数返回的是一个布尔值。
   • 返回true的元素会被包含在新数组中，返回false的元素会被排除。
   • filter通常用于过滤数组，当你需要从一个数组中筛选出满足某些条件的元素时。
     示例：

   const numbers = [1, 2, 3, 4, 5];
   const evens = numbers.filter(number => number % 2 === 0);
   console.log(evens); // 输出：[2, 4]
   

总结来说，map用于转换数组中的每个元素并返回一个新数组，而filter用于根据回调函数的返回值（布尔值）来筛选元素并返回一个新数组。

some/every —返回的是truefalse

this.users.some(item =>item.name!=“lisi”)

foreach (item,index)

find,findindex

分别返回找到的第一个元素和第一个元素的索引

find和findIndex是数组方法，它们用于在数组中查找元素。
find方法：

• find方法遍历数组中的每个元素，直到找到一个元素满足提供的测试函数。
• 找到满足条件的第一个元素后，find会返回该元素的值。
• 如果没有任何元素满足条件，find会返回undefined。
  示例：

const numbers = [5, 12, 8, 130, 44];
const foundNumber = numbers.find(number => number > 10);
console.log(foundNumber); // 输出：12

findIndex方法：

• findIndex与find类似，但它返回满足测试函数的第一个元素的索引，而不是元素本身。
• 如果没有任何元素满足条件，findIndex会返回-1。
  示例：

const numbers = [5, 12, 8, 130, 44];
const foundIndex = numbers.findIndex(number => number > 10);
console.log(foundIndex); // 输出：1

区别：

• find返回找到的元素，而findIndex返回元素的索引。
• find在找到第一个满足条件的元素后就停止搜索，而findIndex会继续搜索并返回第一个满足条件的元素的索引。
• 如果找不到任何满足条件的元素，find返回undefined，而findIndex返回-1。
  注意事项：
• 回调函数中的条件应该返回一个布尔值，决定是否找到所需的元素。
• 这两个方法都不会改变原数组。
  在实际应用中，你可以根据需要选择使用find还是findIndex。如果你只需要元素本身，使用find；如果你需要知道元素的位置（索引），则使用findIndex。

reduce

累加器，就是说先把前两个加起来算和，然后这个和在作为一个参数继续往下进行

computed计算属性

计算属性只渲染一次

生命周期–回调函数–钩子函数

created，mounted用的多
通常情况下，我们需要获取数据，就可以通过后端来获取数据
图表类组件用mounted

组件

全局组件

Vue.component('login',{
   template:'<div><hi>用户登录</h1></div>'
 })

注意只能有一个全局组件，并且组件中只能有一个跟标签，所有组件中都是只能有一个根标签

局部组件

声明局部组件
1.将渲染的东西放到组件中写，就是局部组件登录模板声明

const login ={
   template:'<div><hi>用户登录</h1></div>'
};

const app=new Vue{
        el:"#app",
        data:{},
        methods:{},
        components:{
             login  //如果一样可以直接写login：login可以直接写
}

}

2。将声明的东西放到body中写，就是在Vue实例作用范围外声明

//1.声明局部组件模板  template 标签 注意:在Vue实例作用范围外声明
  <template id="loginTemplate">
      <h1>用户登录</h1>
  </template>

//2.定义变量用来保存模板配置对象
    let login ={   //具体局部组件名称
        template:'#loginTemplate'  //使用自定义template标签选择器即可
    };

//3.注册组件	
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{  //用来注册局部组件
            login:login  //注册局部组件
        }
    });

 //4.局部组件使用 在Vue实例范围内
	 <login></login>

组件有作用域，组件的data是函数，return object

props数组父组件传给子组件的值不能改
组件里面接受数据，：msg:message
props：{
msg：{strig：‘’‘ name：’‘
}
}
就是说可以传递对象，可以是指定类型的，也可以传递字符串
子组件传给父组件的时候，父组件可以设置默认值兼容了不传值的情况
==首先，我们在子组件中点击一个事件，触发一个函数，这个函数中会写到
this.$emit(用来传参的函数send，参数1，参数2)-----注意这里的函数名只能用小写
在子组件的dom中可以使用@来向后端传参，此处涉及父组件接收数据的函数 @find=“findAll”
然后就是在父组件中定义一个方法，有几个参数定义几个参数，然后可以在data中设初值 ==

//1.声明组件
    const login = {
        template:"<div><h1>百思教育 {{ uname }}</h1> <input type='button' value='点我' @click='change'></div>",
        data(){
            return {
                uname:this.name
            }
        },
        props:['name'],
        methods:{
            change(){
                //调用vue实例中函数
                this.$emit('find');  //调用组件传递过来的其他函数时需要使用 this.$emit('函数名调用')
            }
        }
    }
    
 //2.注册组件
    	const app = new Vue({
        el: "#app",
        data: {
            username:"小陈"
        },
        methods: {
            findAll(){  //一个事件函数  将这个函数传递给子组件
                alert('Vue 实例中定义函数');
            }
        },
        components:{
            login,//组件的注册
        }
    });

//3.使用组件
	<login  @find="findAll"></login>    //=====> 在组件内部使用  this.$emit('find')

插槽

template中可以写插槽
内容写在组件里面，组件立刻一些属性slot，任何组件都可以写
插槽可以用标题
通过name来区别
优先传父组件的东西

render

参数render：一个函数，就是用js写html

事件修饰符、表单修饰符

lazy数据更新没渲染
trim
number只能输数字，加字不让输
stop阻止冒泡
prevent阻止默认行为
native把一个组件转成html标签
sync处理弹窗经常用

es6模块化

type是moudle模块化
两个js文件同时let一个变量时
这样的话在js文件中要写export要用到的变量可以是数值字符串对象方法
在调用的文件中script中写import
import 大括号｛ from 文件
export default只传一个
所以对应不用大括号，而且import对应名字可以随便变

router

routerview里面进行展示
把router事例传给vue事例
有个name属性

const routes = [
  {
    path: '/user',
    name: 'user',
    component: User
  }
]

1.声明式跳转：
routerlink会渲染成a标签
a标签中： href：#/user
routerlink中： to如果传的是字符串会自动加斜杠
把id拼到url中
也可以通过变量｛path｛name：

# path
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/user">MyHome</router-link>
# name  传一个对象
<router-link :to="{name:'user'}">MyHome</router-link>
<router-link :to="{path:'/user'}">MyHome</router-link>

2.编程式
定义一个按钮
vue中定义的管理器
this.$router.push（｛加属性name，path）this.$.route.push（‘/当前的路由’）

 this.$router.push('/user')
 this.$router.push({name:'user'})

3.传参
query

<router-link ：to="{path:'/user'+,query:{item:'item'}}">MyHome</router-link>
this.$router.push({name:'user',query:{item:'item'}})

接受数据

this.$route.query.item

params

<router-link ：to="{path:'/user'+,query:{item:'item'}}">MyHome</router-link>
this.$router.push({name:'user',params:{item:'item'}})

接受数据

this.$route.params.item

刷新页面参数会丢失
一般使用将参数放在url上的方式

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

this.$router.push('/user/'+item)
#接收参数 
this.$route.params.username

to:user zz aa
toquery：｛aaa：2，bbb：3｝