我的Spring Boot 之旅——Day9-10

最新推荐文章于 2024-10-11 20:57:01 发布

Joie_Z

最新推荐文章于 2024-10-11 20:57:01 发布

阅读量210

点赞数

文章标签： vue js npm nodejs

本文链接：https://blog.csdn.net/Joie_Z/article/details/103644257

版权

day9 学习js（三）

	今天继续学习js，学习js数组、数组方法等。
	1.js数组，数组方法：

var arr = [2,5,8,9,4];
console.log(arr);


// //sort排序
// arr.sort(function (a,b) {//传递一个比较器，比较器里面的a，b就是元素
//     /*
//     if(a<b){
//         return-1;   //a<b,a在b的前面，升序;a>b,a在b的前面,降序
//     }else{return 1;}  
//     */
//    return a-b;  //返回负数，a和b不交换位置，升序。  若a=3，b=5，3-5=-2，不交换位置，排出来是3和5，所以是升序。 想要降序的话就return b-a；
// });
// console.log(arr);



var stus = [];
//循环生成10个对象(年龄不一样)，并添加到stus数组中
for(var i = 0;i < 10 ; i++){
    //生成随机数
    var num = Math.ceil(Math.random()*20);//Math.ceil(),向上取整，Math.floor(),向下取整;  0-20之间的随机数要乘20
    var num1 = Math.ceil(Math.random()*20);
    console.log(num);
    var obj = {
        name :'zhangsan'+num1,
        age :num,
        gender:num % 2 ? '男' : '女' ,
    };
    stus.push(obj);
}

stus.sort(function(a,b){
    return a.age-b.age;
    //return a.name-b.name;  //排不出来
})

console.log(stus);

stus.sort(compare('name'));
console.log(stus,'-----------');
function compare(attr) {
    return function(a,b){
        return a[attr]<b[attr] ? -1:1;
    }
}

/*
unshift在数组头部添加元素,返回数组添加后的长度
arr.unshift(10);
console.log(arr);
//shif 从数组头部区删除一个元素
arr.shift();
console.log(arr);   //这里运行错误
*/


/*
//concat,连接数组（在数组末尾处）,不改变原数组，返回新数组
//var result = arr.concat(7);
var result = arr.concat([1,3,10]);
console.log(arr);
console.log(result);//[  2, 5, 8,  9, 4, 1, 3, 10]

// console.log(arr.concat([7,6,5]));
// console.log(arr);
*/
/*
//删除数组中最后一个元素
var result = arr.pop();
console.log(result);
console.log(arr);

// console.log(arr.pop());
// console.log(arr);

//往数组末尾添加一个元素
console.log(arr.push(10));//5
console.log(arr);//[ 2, 5, 8, 9, 10 ]

//push一个数组
console.log(arr.push([7,4,3]));//6
console.log(arr);//[ 2, 5, 8, 9, 10, [ 7, 4, 3 ] ]
*/

var stus = [];
//循环生成10个对象(年龄不一样)，并且添加到stus数组在
for(var i=0;i<10;i++){
    //生成随机数  Math.ceil向上取整 .floor向下取整
    var num = Math.ceil(Math.random()*20);
    var num1 = Math.ceil(Math.random()*20);
    // console.log(num);
    var obj={
        name:'zhangsan' + num1,
        age: num,
        gender: num % 2 ? '男':'女',//false : ture
    };
    stus.push(obj);
}
console.log(stus,'------');
//给数组里的每个对象添加属性
//遍历forEach 迭代方法
stus.forEach(function (item) {
    item.className = '1班';
});
console.log(stus);



//过滤年龄大于15的学生
var result = stus.filter((item)=>{
    return item.age>15;
})
console.log(result);

// //获取所有名字
// //map
// var result = stus.map(function (item) {
//     return item.name;
// })
// console.log(result);

// stus.sort(compare('age'));
// console.log(stus,'---------------');
// function compare(attr){
//     return function(a,b){
//         return a[attr] < b[attr] ? -1:1;
//     }
// }

let arr = [4,7,9,1];
console.log(arr);

//数组反转
//arr.reverse();

console.log(arr.toString());//返回逗号分割数组元素的字符串
console.log(arr);
console.log(arr.join('&'));

2.ES6解构，变量声明，常量声明，对象扩展，属性简写，方法简写等

let obj = {
    username:'zhangsan',
    age:'12'
  }
  //let username = obj.username
  //let age = obj.age;
  let {username,age} = obj;//解构同名属性进行赋值
  let {a,b,c} = {a:1,b:2};//c undefined
  console.log(a,b,c);//1 2 undefined

  //数组解构
  let [d,e] = [3,6,8];
  console.log(d,e,);
  let [f,g,h,i] = [3,6,8];
  console.log(f,g,h,i); //3,6,8 undefined

//对象扩展
let username = 'zhangsan';
let age = 12;
/*//
let obj = {
    test:'hello',
    msg:'word',
    username,
    age,
};//*/

//对象简写
let obj = {username,age};
console.log(obj);
//解构重命名
let {username:u,age:a} = obj;
console.log(u,a);

//方法简写
let obj2 = {
    username,
    age,
    sayName(){
        console.log(this);
        console.log(this.username);
    },
    // sayName:()=>{//一般箭头函数后面不用this
    //     console.log(this);
    //     console.log(this.username);
    // },
}
obj2.sayName();

day10 搭建vue

  今天进行vue的学习，MVVM模式的数据驱动框架，数据驱动的思想，重点关注数据，操作数据就可以。首先进行vue的配置。

1. 设置npm包管理的镜像为淘宝镜像，打开终端，用命令：npm config set registry=https://registry.npm.taobao.org 进行操作。但是首先我们得确定自己的电脑上是否有node和npm，所以先用命令：node -v和npm -v查看版本，确定两者都有了才设置镜像。
在这里插入图片描述

2. 通过npm全局安装yarn包管理工具。使用命令：npm install -g yarn。当然，如果想使用cnpm的话得先install cnpm才能install yarn，即使用两条命令：npm install -g cnpm；cnpm install -g yarn。（恢复的时候使用这条命令：npm config set registry https://registry.npmjs.org）。安装完之后查看yarn的版本：yarn --version。
在这里插入图片描述
3.使用npm全局下载vue-cli工具，首先在上面的步骤都完成的情况下进行这一步：npm install @vue/cli -g，完成之后查看版本号：vue -V（注意，这里一定要是大写V）.

4.使用vue-cli创建vue项目,打开VS code，进入day11目录下，执行以下命令
vue create app
然后启动项目
cd app
yarn serve
启动项目后点击看看是否能连上网，打开浏览器输入：localhost：8080.连上网就创建成功了。

5.在components底下创建hello.vue文件
在这里插入图片描述
6.配置编写Vue代码的用户代码片段.
安装vue插件，Vuetr，vue
点击VSCode–>文件–>首选项–>用户代码片段
输入vue,打开vue.json进行编辑，将以下对象内的代码粘贴到该文件的对象内
{
“Print to console”: {
“prefix”: “vue”,
“body”: [
“”,
" <div class=“wrapper”> $KaTeX parse error: Expected 'EOF', got '}' at position 478: \dotsemplate" }̲ } 注意在v\dots$ ’: ‘vue/dist/vue.esm.js’
}
}
}

7.创建Vue组件进行学习
组件内有template代表结构模板
script标签内默认导出一个对象，这个对象是一个vue实例，该对象内有一些重要属性和函数如下
data(){
return {} //返回的这个对象是数据模型，是DOM中可使用的数据模型
}
computed:{} 计算属性，DOM中可使用的计算的数据来源
methods:{} DOM中可使用的事件处理程序,
created() {} 钩子函数，组件生命周期函数组件创建完毕，可访问组件的数据模型中的数据，可在这里发送ajax请求
mounted() {} 组件挂载完毕，可获取节点.

以下，附上代码：
hello.vue:

<template></template>
  <div>{{msg}}
      <input type="text" v-model="inputValue">
      {{inputValue}}
      <br />
      <input type="checkbox" value="baskeball" v-model="hobbies">篮球
      <input type="checkbox" value="singing" v-model="hobbies">唱歌
      <input type="checkbox" value="dancing" v-model="hobbies">跳舞
      {{hobbies}}
      <br />-------<br />
      
      <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>    
        <tr v-for="(item,index) in stusList" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
      </table>
      <br />-------<br />
      <select v-model="order">
          <option value="">请选择</option>
          <option v-for="(item,index) in orders" :key="index" :value="item.value">{{item.name}}</option>
      </select>
      {{order}}
      <br />-------<br />
  </div>
</template>

<script>
//将表单中用户的输入显示到页面上，双线数据绑定
export default {
  data() {
    return {
        order:"name",
        inputValue:"123",
        hobbies:["singing"],
        msg:"helloword",
        orders:[{name:'编号',value:'id'},{name:'姓名',value:'name'},{name:'年龄',value:'age'}],
        //列表渲染
        stus:[{
            id:1001,
            name:"zhangsan",
            age:12
        },
        {
            id:1002,
            name:"lisi",
            age:13
        }
        ],
    };
  },

  //存放计算属性
  computed: {
      stusList(){
          let temp = [...this.stus];//...表示将数组内部对象展开，放到新数组中
          return temp.sort(((attr)=>{
              return function (a,b) {
                  if(a[attr]<b[attr]){return -1;}
                  else{return 1;}
              }
          })(this.order));
      }
  },
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style scoped>
.wrapper{}
</style>

App.vue:

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Hello></Hello>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import Hello from './components/Hello';
export default {
  name: 'app',
  components: {
    HelloWorld,
    //注册组件
    Hello
  }
}
</script>

<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>