vue.js 简单实用 1

最新推荐文章于 2024-07-20 05:45:05 发布

鸦教授

最新推荐文章于 2024-07-20 05:45:05 发布

阅读量227

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/a184477587/article/details/81701000

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.vue 基本格式
新建一个vue，里面的参数有
1.el：传入vue.js 作用范围，这里可以是id和class，但是不能是标签如“body”;
2.data:数据
3：mounted：vue其中的一个生命周期，在数据加载前，这里经常要做数据加载的作用，这里面在调用内部方法时要加入 this.$nextTick(function(){}),去调用，看文档说明，因为mounted不能保证能取到值，所以要调用此方法。
4：filters：局部过滤器，一般都弄个全局的过滤器使用。
5.methods:事件的方法

以下是基本的格式

 new Vue({
             el:"#app",
             data:{

             },
             mounted:function(){
                this.$nextTick(function(){
                this.cartView();
                 })
             },
             filters:{

             },
             methods:{
                cartView:function(){
                 var _this = this;

              this.$http.get("data/cartData.json",{"id":123}).then(function(res){
                _this.productList = res.data.result.list;
                alert(JSON.stringify(res));
               });
             }

             }

     })

二.传值
1）外部向内部模板传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"><button @click="handleSubmit()">提交</button>

            <ul>
            <!--2.引入template-->
            <!--3.随便绑定一个属性,比如自己绑定一个属性content,把要传递的值给属性-->
             <todo-item v-for="(item,index) in list" 
                :key="index"
                :content="item"  
                ></todo-item>
            </ul>
        </div>
    </body>
<script src="js/vue.min.js"></script>
<script>
    //1.创建一个全局组件:todo-item
    Vue.component('todo-item',{
        props:['content'], //4.用props接收外部content属性的值
        template:'<li>{{content}}</li>'//5、显示出来
    })
    new Vue({
        el:'#app',
        data:{
            list:[],
            inputValue:''
        },
        mounted:function(){

        },
        methods:{

            handleSubmit:function(){
            this.list.push(this.inputValue);
            this.inputValue='';
           },
           delete:function(index){
            alert(index);
           }
        }
    });
</script>   
</html>

  显示结果：

这里写图片描述

2 .子组件向父组件通信（子组件删除功能）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>

        <div id="app">
            <input type="text" v-model="inputValue"><button @click="handleSubmit()">提交</button>

            <ul>

            <!--3.@delete即v-on:delete, v-on 监听子组件的delete事件，调用父组件的handleDelete 方法，这里不用写传递参数-->
             <todo-item v-for="(item,index) in list" 
                :key="index"
                :content="item" 
                :index="index"
                @delete="handleDelete"
                ></todo-item>
            </ul>
        </div>
    </body> 
<script src="js/vue.min.js"></script>
<script>
    Vue.component('todo-item',{
        props:['content','index'], //1.用props接收外部index属性的值
        template:'<li @click="handleClick">{{content}}</li>',
        methods:{
            handleClick:function(){
                this.$emit('delete',this.index); //2.$emit方法是重点，向外触发delete事件，值为index属性的值.
            }
        }
    })
    new Vue({
        el:'#app',
        data:{
            list:[],
            inputValue:''
        },
        mounted:function(){

        },
        methods:{
            handleSubmit:function(){
            this.list.push(this.inputValue);
            this.inputValue='';
           },//4.这里要接收传递的参数
            handleDelete:function(index){
                this.list.splice(index,1);
            }
        }
    });
</script>   
</html>

三.vue-cli 脚手架工具

 使用vue-cli 新建一个vue项目
 1.先安装node.js 环境，里面有npm命令
  百度搜索Node.js 进入官网，或者输入下面链接：
  **https://nodejs.org/en/download/**

这里写图片描述

 2.打开cmd 运行node -v 查看node版本， npm -v查看npm版本，如果有正常显示则正确安装了node

 3.新建vue.js 项目，项目名：todolist。先打开你要放项目的文件夹，安装shift和右键打开cmd
   npm install --global vue-cli   //安装vue-cli 脚手架工具
   vue init webpack todolist      //用webpack初始化项目

 **问题：**   如果出现运行很久一直卡在“fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org”这个地方，则：
    npm config set registry https://registry.npm.taobao.org 
    – 配置后可通过下面方式来验证是否成功 
     npm config get registry 
     或npm info express
 **过程：**
    正常安装过程会出现一些问题让你选：
    1）Project name :输入项目名
    2) Project description: 按enter默认
    3) Author :按enter默认
    4) Vue build:按enter默认
    5) Install vue-router?:n(看需求)
    6) Use ESLint to lint..:要不要规范你的代码按y
    7) Pick an ESLint preset :按enter
    8）Set up unit tests: 按n(看需求)
    9）Setup e2e tests with ...:no
    10) Should we run 'npm install' for you after:按y


   安装完成后 进入项目文件夹：cd todolist 
   然后:nmp run dev
   看到提示让你打开网页地址就是成功了：http://localhost:8080/

 然后我们把上面第二部的代码改成webpack这种形式的：

这里写图片描述

   index.html 不用改代码用项目自己的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>todolist</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->


  </body>
</html>

    main.js:

import Vue from 'vue'
import TodoList from './TodoList'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { TodoList },
  template: '<TodoList/>'
})

接下来这2个.vue文件就是组件，父组件：TodoList.vue:

<template>
<div> <!--templat里面只能有一个最外层的标签-->
    <div>
        <input v-model="inputValue" />
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
        <todo-item v-for="(item,index) in list" :key="" v-text="item" :content="item" :index="index" @delete="handleDel()"></todo-item>

    </ul>

</div>

</template>


<script>
    import TodoItem from './components/TodoItem'
 export default{
      components:{

        'todo-item':TodoItem

      },
       data (){
        return {
            inputValue:'',
            list:[]
        }
      },
      methods:{
        handleSubmit:function(){
            this.list.push(this.inputValue);
            this.inputValue='';
        },
        handleDel:function(index){

            this.list.splice(index,1);
        }
      }
 }
</script>
<style>
</style>

    子组件：TodoItem.vue

<template>
<li @click="handleDelete()">{{content}}</li>
</template>

<script>
export default {
     props:['content','index'],
       methods:{
            handleDelete:function(){
                this.$emit('delete',this.index);
            }
         }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 vue-cli 命令行：
 1.npm install -g vue-cli
 2.vue init webpack my-project
 3.cd my project
 4.npm install
 5.npm run dev

 vue-cli 建立的项目结构说明 可以看下面资料：
 **https://my.oschina.net/liuyuantao/blog/883251**

鸦教授

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js 简单实用 1

一。新建一个vue，里面的参数有 1.el：传入vue.js 作用范围，这里可以是id和class，但是不能是标签如“body”; 2.data:数据 3：mounted：vue其中的一个生命周期，在数据加载前，这里经常要做数据加载的作用，这里面在调用内部方法时要加入 this.$nextTick(function(){}),去调用，看文档说明，因为mounted不能保证...
复制链接

扫一扫

专栏目录