12.30

最新推荐文章于 2024-09-04 23:26:56 发布

m0_63713211

最新推荐文章于 2024-09-04 23:26:56 发布

阅读量299

点赞数

文章标签： webpack vue.js javascript

本文链接：https://blog.csdn.net/m0_63713211/article/details/128502710

版权

一.复习

基本列表

<ul>
        <li v-for="(p,index) in persons" :key="index">{{p.name}} {{index}}
        </li>
     </ul>
     <ul>
        <li v-for="(value,k) in car" :key="k">{{k}}--{{value}}</li>
     </ul>
    </div>

</body>
<script>new Vue({
  el:'.root1',
  data:{
    //遍历数组
    persons:[
        //数据有顺序用数组存
        //每个人是个对象
        { id:'001',name:'张三'},
        { id:'002',name:'张三'},
        { id:'003',name:'张三'}
    ],
    //遍历对象
    car:{
        name:'aodi',
        price:'1200',
        color:'pink'
    }
  }
})

列表过滤

 new Vue({
  el:'.root1',
  data:{
    keyword:'',
    persons:[
        { id:'001',name:'马冬梅',age:19},
        { id:'002',name:'周冬雨',age:19},
        { id:'003',name:'周杰伦',age:19},
        { id:'003',name:'温兆伦',age:19}

    ]
  },
  computed:{
    filpersons(){
      //将过滤出的数据返回
     return this.persons.filter((p)=>{
      //过滤出包含关键字的数据
            return p.name.indexOf(this.keyword)!== -1 
        })
    }
  }
  
})

姓名案例

计算属性

 <div class="root1">
        姓: <input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        全名：{{fullName}}
    </div>
</body>
<script>
    new Vue({
      el:'.root1',
      data:{
        firstName:'张',
        lastName:'三'
      },
      computed:{
        //不需要在数据里配置fullname属性 是计算出来的
        //执行完往vm上放了个fullname的属性
      fullName(){
        //读取fullname时会调用get 初次读取还有数据被修改时被调用
            //简写相当于fullname()变为了getter使用
        return this.firstName+this.lastName
      }
    }
 })
</script>

methods

<div class="root1">
        姓: <input type="text" v-model="firstname">
        名：<input type="text" v-model="lastname">
        <!-- 必须加括号 是函数的返回值展示 -->
        全名：{{fullname()}}
    </div>
</body>
<script>
    new Vue({
      el:'.root1',
      data:{
        firstname:'张',
        lastname:'三'
      },
      methods:{
        //函数
      fullname(){
        //手动调用 插值语法 需要展示返回值 需要写return 
      return this.firstname+this.lastname
      }
    }
 })
</script>

条件渲染

<div class="root1">
    <h2>当前n的值为:{{n}}</h2>
    <button @click="n++">点我n加一</button>

    <div v-show="false"> 1234 </div>
    <div v-if="false"> 1234 </div>
    <div v-if="n==1">n的值是1</div>
    <!--if执行完后不看else if 即使else-if条件为真-->
    <div v-else-if="n==1">n的值是2</div>
    <div v-else-if="n==3">n的值是3</div>
    <!-- v-else 前面条件均不成立 则执行 不需要写条件-->
    <div v-else></div>
    <!-- v-if 只能和template配合使用 页面渲染的时候 template消失 不影响只有h2的结构-->
    <template >
        <h2>哈哈</h2>
        <h2>哈哈</h2>
        <h2>哈哈</h2>
    </template>
    
    
</div>
</body>
<script>
  new Vue({
    el:'.root1',
    data:{
      name:'张三',
      n:0
    }
  })
</script>

二.尚品汇

1-7

（1）准备

1.1:node + webpack + VScode + git

2)脚手架使用

2: vue init webpack 项目的名字

3|4：vue create 项目名称

脚手架目录:public + assets文件夹区别

node_modules:放置项目依赖的地方

public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面

src：程序员源代码文件夹

-----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）

-----components文件夹:一般放置非路由组件（或者项目共用的组件）

App.vue 唯一的根组件

main.js 入口文件【程序最先执行的文件】

babel.config.js:babel配置文件

package.json：看到项目描述、项目依赖、项目运行指令

README.md:项目说明文件

3)脚手架下载下来的项目稍微配置一下

3.1:浏览器自动打开

在package.json文件中

"scripts": {

"serve": "vue-cli-service serve --open",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

},

3.2关闭eslint校验工具

创建vue.config.js文件：需要对外暴露

module.exports = {

lintOnSave:false,

}

3.3 src文件夹的别名的设置

因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些

创建jsconfig.json文件

{

"compilerOptions": {

"baseUrl": "./",

"paths": {

"@/*": [

"src/*"

]

}

},

"exclude": [

"node_modules",

"dist"

]

4）路由的配置

vue-router

路由分为KV

前端路由:

K即为URL（网络资源定位符）

V即为相应的路由组件

（5）

5.1路由的一个分析

确定项目结构顺序:上中下 -----只有中间部分的V在发生变化，中间部分应该使用的是路由组件

2个非路由组件|四个路由组件

两个非路由组件：Header 、Footer

路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）

5.2安装路由

cnpm install --save vue-router

--save:可以让你安装的依赖，在package.json文件当中进行记录

5.3创建路由组件【一般放在views|pages文件夹】

5.4配置路由，配置完四个路由组件

6)创建非路由组件（2个：Header、Footer）

非路由组件使用分为几步:

第一步：定义

第二步：引入

第三步：注册

第四步:使用

项目采用的less样式,浏览器不识别less语法，需要一些loader进行处理，把less语法转换为CSS语法

1：安装less less-loader@6

2:需要在style标签的身上加上lang="less",不添加样式不生效