Vue的学习

最新推荐文章于 2024-11-13 15:29:17 发布

kenneth1212

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量126

点赞数

文章标签： vue javascript html

本文链接：https://blog.csdn.net/m0_52568881/article/details/118740058

版权

本文介绍了如何使用Vue框架和Element UI库来构建一个简单的备忘录功能，包括基本的文本输入、添加项和删除功能，并演示了Vue组件的使用。还展示了如何将Element UI控件融入项目，提升用户体验。

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

需要的网址

Vue官网教程： https://cn.vuejs.org/v2/guide/

Vue的API：https://cn.vuejs.org/v2/api/

Element：https://element.eleme.cn/#/zh-CN/component/installation

Vue内使用Element:https://www.cnblogs.com/zmoneyz/p/12993006.html

编程：

创建一个index.html

在head标签里加入此语句

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

例子：

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


</head>

<body>
<div id='app'>{{message}}</div>

<script type="text/javascript">

var vm=new Vue({
el: '#app',
data:{

    message:'aaaaaaaa'
}


});


</script>

</body>






</html>

点击使得字符串反转

<div id="app2">{{msg}}
<button  @click="change"> change</button>
</div>



<script>

var vm=new Vue({
el:'#app2',
data:{
    msg:'Hello!',
},
methods:{
change(){
    // split 分开字符串
    // reverse 反转字符串
    // 组合字符串
this.msg=this.msg.split('').reverse().join('')
}

}

})

</script>

输出结果： Hello！====》!olleH

备忘录功能实现

用Vue写一个简单备忘录功能：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TODO-LIST</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>



</head>

<body>

  <div id="app" style="width:400px; margin:0 auto">
    <h1 style="color:cadetblue; font-size: 20px;">{{message}}</h1>

    <input type="text" name="Do" placeholder="What you wanna do !" v-model="value"></input>
    <button type="submit" value={{item}} @click="add">Submit</button>


    <div v-for="(item,index) in list">
      {{index}}{{item}}
      <button type="danger" @click="remove(index)">Done</button>

    </div>

  </div>


  <script>

    var vm = new Vue({
      el: '#app',

      data: {
        message: "ToDo",
        list: ["HTML", "CSS"],
        value:"",
      },

      methods: {

        add() {
          this.list.push(this.value);
          this.value = "";
        },

        remove(index) {
          this.list.splice(index, 1);

        },

      },

    });

  </script>




</body>

</html>

用Vue写一个简单备忘录功能(加入Element的控件)：

CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

（添加在head标签中）

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

然后就可以寻找相关的控件，复制其源码至你的代码段中。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TODO-LIST</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>




</head>

<body>




  <div id="app" style="width:400px; margin:0 auto">

    <h1 style="color:cadetblue; font-size: 20px; margin: 0 50%;">{{message}}</h1>

    <!-- el标签： 引用了element的控件 -->

    <div style="display: flex">
      <el-input v-model="value" placeholder="What is your main focus for today ?" style="margin-right: 5px;">
      </el-input>

      <el-button type="primary" icon="el-icon-edit" @click="add" ></el-button>

    </div>

    <el-card class="box-card" v-for="(item,index) in list" style="margin-top:5px;">


      <div style="display: flex; align-items: center">
        <el-tag type="success">{{index+1}}</el-tag>
        <p style="flex: 1; padding: 0 20px">{{item}}</p>

        <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="remove(index)"></el-button>

      </div>


    </el-card>




  </div>


  <script>

    var vm = new Vue({
      el: '#app',

      data: {
        message: "ToDo",
        list: ["HTML", "CSS"],
        value: "",
      },

      methods: {

        add() {
          this.list.push(this.value);
          this.value = "";
        },

        remove(index) {
          this.list.splice(index, 1);

        },

      },

    });

  </script>




</body>

</html>

（显示结果）

Vue的组件学习：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <title>Document</title>

</head>

<!-- 
Vue.component全局注册组件
button-counter为 组件（component）自定义的，其根据模版（template）的格式生成。
    在模版中可以增加<slot></slot>标签来实现位置的插槽。
    title对应的是属性（props）的内容。
    创建的第二个button-counter 引入了clicknow方法（自定义的），目的在于记录count的数值，返回到控制台，而不仅仅是输出。
 -->
<body>
    <div id="app">
        <button-counter title="button1: "></button-counter>
        <button-counter title="button2: " @clicknow="clicknow"></button-counter>
    </div>


    <script>
        Vue.component('button-counter', {
            props: ['title'],
            data: function () {
                return {
                    count: 0
                }

            },
            template: '<button v-on:click="count++"> {{title}}{{count}} times </button>',


            methods: {
                clickfun: function () {
                    this.count++;
                    this.$emit('clicknow', this.count);


                },
                methods: {
                    clicknow: function (e) {

                        console.log(e);
                    }


                }


            }

        })


        var vm = new Vue({
            el: '#app',
            data: {

            }


        });



    </script>

</body>

</html>

如果想要完成局部创建，则需要在new Vue下创建一个componets方法。

例如：

componets: {
                test: {
                    template: "<h2>这是局部创建的组件</h2>",
                }

            }

test里的内容以对象的方式创建。

若要调用此组件，只需要命名一个test（自定义）标签即可。

node.js：

下载：http://nodejs.cn/download/

安装教程：

        windows：https://blog.csdn.net/wjnf012/article/details/80422313

https://www.cnblogs.com/zhouyu2017/p/6485265.html

https://www.cnblogs.com/zhouyu2017/p/6485265.html

        mac：https://www.cnblogs.com/jiachangwei/p/12202827.html

Vue cli:

https://cli.vuejs.org/zh/guide/installation.html

        https://blog.csdn.net/weixin_50446072/article/details/111176922

webpack:https://blog.csdn.net/github_40020301/article/details/80857223

在终端输入vue ui 进入图示化界面：

通过图示化创建项目之后：

找出项目文件，将其拉入到编译器即可。

然后，在components文件里，可以创建自己的.vue文件

它里面的格式：



<!-- 放置模版视图 -->
<template>
    
</template>



<!-- 放置脚本 -->
<script>

</script>





<!-- 放置样式 -->
<style>

</style>

例子：



<!-- 放置模版视图 -->
<template>
  <h2 class="red">test</h2>
</template>



<!-- 放置脚本 -->
<script>

export default {
  name: "test",
  props: {
    msg: {
      type: String,
      default: "testing msg",
    },
  },
  methods: {},

  data() {
    return {};
  },
};
</script>

<!-- 放置样式 -->
<style>
.red{color:red}
</style>

写完自己的内容。需要去APP.vue文件里面导入自己刚刚建立的文件。并且加入到局部组件中。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
//用自定义的test标签定义即可渲染到前端
    <test></test>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
//  引入
import test from "./components/test.vue"

export default {
  name: 'App',
  components: {
    HelloWorld,
//新加的test
    test
  }
}
</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>