1-Vue介绍、指令基础、TodoList

最新推荐文章于 2024-02-21 11:41:03 发布

valueyear

最新推荐文章于 2024-02-21 11:41:03 发布

阅读量62

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43714814/article/details/121752885

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Vue介绍、指令基础、TodoList

(一)、Vue介绍

(1)、网址

vuejs官网：https://cn.vuejs.org

vuejs官方论坛：https://forum.vuejs.org

(2)、特点：

vue不支持IE8及以下版本

vue发展迅速，Nuxt框架能够帮我们快速实现Vue的服务器渲染，Weex框架使用Vue的语法，能够编写原生APP。

Vue五大特点：1.应用范围广 2.生态环境好 3.代码轻量 4.上手简单 5.发展迅速

(3)、基本使用

<!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>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div :style="styleObj" @click="handleBtnClick"> 
            Hello World
        </div>
    </div>

    <script type="text/javascript">
      var vm = new Vue({
          el: '#root',
          data: {
              styleObj:{
                  color: "red"
              }
          },
          methods: {
              handleBtnClick: function(){
                  alert('我被点击了');
              }
          }
      })
    </script>
</body>
</html>

(4)、与原生JS的对比

原生JS的写法

<body>
    <div id="root"></div>

    <script type="text/javascript">
       var root = document.getElementById('root');
       root.innerHTML = '比利时 3:2 日本';
    </script>
</body>

VueJS的写法

mustache语法胡子{{message}}，也叫插值表达式

<body>
    <div id="root">{{message}}</div>

    <script type="text/javascript">
       var vm = new Vue({
           el: '#root',
           data:{
               message: '比利时 3:2 日本'
           }
       })
    </script>
</body>

2s之后改变内容

原生JS写法

<body>
    <div id="root"></div>

    <script type="text/javascript">
       var root = document.getElementById('root');
       root.innerHTML = '这是2014年世界杯';

       setTimeout(function(){
           root.innerHTML = '杯界世年4102是这';
       }, 2000)
    </script>
</body>

VueJS写法

<body>
    <div id="root">{{ message }}</div>

    <script type="text/javascript">
       var vm = new Vue({
           el: '#root',
           data: {
               message: '这是2014年世界杯'
           }
       })

       setTimeout(function(){
           vm.$data.message = '杯界世年4102是这';
       },2000);
    </script>
</body>

(二)、指令基础

(1)、v-for指令：循环数组

 <li v-for="item in list">{{ item }}</li>

(2)、v-on指令：绑定事件

 <button v-on:click="handleBtnClick">提交</button>

(3)、v-model: 双向绑定

<input v-model="inputValue" type="text"  />

(三)、todolist

<body>
    <div id="root">
        <input v-model="inputValue" type="text"  />
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>

    <script type="text/javascript">
       var vm = new Vue({
           el: '#root',
           data: {
              inputValue: '', 
              list: []
           },
           methods: {
               handleBtnClick: function(){
                    this.list.push(this.inputValue);
               }
           }
       })

    </script>
</body>
</html>