Vue学习day03(vscode)

最新推荐文章于 2023-06-26 17:09:26 发布

秃头大学生破晓

最新推荐文章于 2023-06-26 17:09:26 发布

阅读量326

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43748856/article/details/119149338

版权

本文介绍了Vue.js的基础知识，包括计算属性及其与methods的对比，事件监听的使用及修饰符，条件判断和循环遍历的语法。详细讲解了v-model的原理和不同场景的应用，以及组件化的概念和父子组件通信的方式。同时还涉及到了JS高阶函数的使用和Vue组件数据管理的最佳实践。

摘要由CSDN通过智能技术生成

一、计算属性
1.1计算属性的本质
fulliname:{set(),get()}
1.2计算属性和methods对比
计算属性在多次使用时只会调用一次，
它是有缓存的

二、事件监听
2.1事件监听的基本使用
2.2参数问题
btnClick
btnClick(event)
btnClick(abc,event)->$event
2.3修饰符
.stop
.prevent
.enter
.once
.native

三、条件判断
3.1 v-if/v-else-if/v-else
3.2 登录小案例
3.3 v-show和v-if的区别

四、循环遍历
4.1遍历数组
4.2遍历对象
value
value，key
value，key，index
4.3数组那些方法是响应式的
4.4作业完成

五、书籍案例

六、v-model的使用
6.1v-model的基本使用
v-model => v-bind:value v-on:input
6.2v-model和radio和checkbox和select
6.3修饰符
lazy
number
trim

七、组合化开发
7.1认识组件化
7.2组件的基本使用
7.3全局组件和局部组件
7.4父组件和子组件
7.5组件注册的语法糖
7.6模板的分离写法
script
template
7.7数据的存放
子组件不能直接访问父组件
子组件中有自己的data而且必须是一个函数
为什么必须是一个函数
7.8父子组件的通信
父传子：props
子传父：$emit
7.9项目
npm install
npm run serve

1.JS高阶函数的使用(filter/map/reduce)

//函数式编程（第一公民：函数）
给出一个数组:
const nums = [10,20,111,222,444,30,50];
1.需求去除所有小于100的数字
2.将所有小于100的数字进行转化：全部*2
3.将所有new2nums里的数字相加，得到最终结果
普通写法:

//1.需求去除所有小于100的数字
let newnums = [];
for(let n of nums){
  if(n<100){
    newnums.push(n);
  }
}

//2.将所有小于100的数字进行转化：全部*2
let new2nums = [];
for(let n of newnums){
  new2nums.push(n*2);
}

//3.将所有new2nums里的数字相加，得到最终结果
let total = 0;
for(let n of new2nums){
  total += n;
}

运用高阶函数：

//filter函数：
//filter中的回调函数有一个要求：必须返回一个boolean值
//true:当返回true时，函数内部会自动将这次的回调的n加入到新的数组中
//false:当返回值为false时，函数内部会过滤掉这次的n
let newnums =  nums.filter(function(n){
   
  return n<100;
});

//map函数：
let new2nums = newnums.map(function(n){
   
  return n*2;
});

//newnums: 10 20 30 50
console.log(newnums);
//reduce函数:
//reduce作用对数组中所有的内容进行汇总
let total = newnums.reduce(function(prevalue,n){
   
  return prevalue+n;
},0);

console.log(total);

将函数写的整洁一点,让人一目了然

let sum = nums.filter(function(n){
   
  return n<100;
}).map(function(n){
   
  return n*2;
}).reduce(function(prevalue,n){
   
  return prevalue+n;
},0)

箭头函数的写法

let total1 = nums.filter(n => n<100).map(n => n*2).reduce((pre,n) => pre+n);
console.log(total1)

2.v-model的基本使用和原理
基本使用：

<div id="app">
  <!-- 双向绑定，修改message值时input内容改变；改变input内容，message也改变 -->
  <input type="text" v-model="message">
  <h2>{
  {message}}</h2>
</div>

v-model的原理：

<body>
<div id="app">
  
  //1.
  <input type="text" v-model="message">
  <h2>{
  {message}}</h2>

  //2.
  <input type="text" :value="message"  @input="valuechange">

  //3.
  <input type="text" :value="message" @input = "message = $event.target.value">

</div>
</body>
<script>
    
    let app = new Vue({
     
        el:'#app',
        data:{
     
            message:'Hello World'
        },
        methods: {
     
          valuechange(event){
     
            this.message = event.target.value;
          }
        },
    })
</script>

1.使用v-bind绑定了value和message，当在控制台改变message的值时，输入框内的值也跟着改变
2.绑定了value和message，同时使用v-on添加input事件，绑定方法valuechange，在没有写()的情况下默认传入event事件，在valuechange内将message值更新为输入框内的值
3.直接在@input后跟上表达式，通过$获取event

3.v-model结合radio的使用


<body>
<div id="app">
  <label for="male">
    <!-- v-modle绑定同一个变量也可以让两个选择框只能同时选择一个值，代替了name="sex" -->
    <!-- 且当给sex变量赋初值为radio中的某一个value值时，就会默认选中那个radio -->
    <input type="radio" id="male"  value="男" v-model="sex">男
  </label>

  <label for="female">
    <input type="radio" id="female"  value="女" v-model="sex">女
  </label>

  <h2>您选择的性别是:{
  {sex}}</h2>
</div>
</body>
<script>
    
    let app = new Vue({
     
        el:'#app',
        data:{
     
            message:'Hello World',
            sex:'女',
        }
    })
</script>

v-modle绑定同一个变量也可以让两个选择框只能同时选择一个值，代替了name=“sex”
且当给sex变量赋初值为radio中的某一个value值时，就会默认选中那个radio
在这里插入图片描述

4.v-model结合checkbox的使用


<body>
<div id="app">
  
  <!-- 单选框 -->
  <label for="license">
    <input type="checkbox"

最低0.47元/天解锁文章

秃头大学生破晓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录