Web前端-Vue.js必备框架（一）

痛定思痛。 2021-09-18 08:48 370阅读 0赞

![Web前端-Vue.js][Web_-Vue.js]

> Web前端-Vue.js必备框架（一）

<!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Vue js</title>
    </head>
    <body>
    
    <div id="app">
     <h1>{
       { message }}</h1>
     <input type="text" v-model="message">
     <pre>
      {
       { $data | json }}
     </pre>
    </div>
    
    <script src="vue.min.js"></script>
    
    <script>
    new Vue({
     el: "#app",
     data: {
      message: "Hello World!"
     }
    });
    
    </script>
    </body>
    </html>

<!DOCTYPE html>
     <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>Vue js</title>
     </head>
    <body>
    
    <div id="app">
     <form>
      <div class="error" v-show="!message">dashucoding</div>
      <textarea v-model="message"></textarea>
      <button v-show="message">Send</button>
     </form>
     
     <pre>{
       { $data | json }}</pre>
    </div>
    
    <script src="vue.min.js"></script>
    <script>
     new Vue({
      el: '#app',
      data:{
       message: ''
      }
     });
    </script>
    
    </body>
    </html>

> `v-show`和`v-if`使用第一个整体元素还存在，使用第二个整体都不存在了。

<head>
     <meta charset="UTF-8">
     <title>Vue.js</title>
     <link rel = "stylesheet" href="main.css">
    </head>
    
    <body>
    <div id = "app">
     <form action="demo.html" v-on:submit="submitForm">
      <button type="submit">Submit</button>
     </form>
    </div>
    
    <script src="vue.min.js"></script>
    <script>
    new Vue({
     el: '#app',
     methods: {
      submitForm: function(e){
       alert("dashucoding");
       //e.preventDefault();
      } 
     }
    
    })
    </script>
    </body>
    </html>

组件化

<body>
    
    <div id="app">
     <count></count>
    </div>
    
    <template id="da">
    </template>
    
    <script src="vue.min.js"></script>
    <script>
     Vue.component("counter", {
       template: '<h1>dashu</h1>'
     });
    
    new Vue({
     el: '#app',
     data: {
      count: 0
     },
    
    })
    </script>
    
    </body>

什么是`Vue.js`？是目前最火的框架，`React`是最流行的框架，打包工具`Webpack`，目前三大主流`Vue.js`，`Angular.js`，`React.js`框架。

`Vue.js`构建用户界面框架，注重视图层。

`React`开发网站，开发手机APP

`Vue`可以用于开发APP，需要`Weex`

> MVC 是 后端开发的概念  
> MVVM，视图层分离  
> Model, View, VM ViewModel

`MVVM`的案例：

v-cloak
    
    [v-clock]{
     display: none;
    }
    <p v-cloak></p>
    
    v-text v-html v-bind: v-on

事件修饰符

v-on
    .stop 阻止冒泡
    .prevent 阻止默认事件
    .capture 使用事件捕获模式
    .self 只当事件在该元素本身触发时回调
    .once 事件只触发一次

<body>
     <div id = "app">
      <div>
       <input type="button" value="戳他">
      <div>
     </div>
     <script>
      var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
       });
     </script>
    </body>

实例：`Vue.js`只关注视图层

<div id = "app">
     <p> {
       { message }} </p>
    </div>

下载地址：  
`https://vuejs.org/js/vue.min.js`

<div id="app">
      {
       { message }}
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

<div id="app">
      <span v-bind:title="message">
        鼠标悬停
      </span
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

<div id="app">
      <p v-if="seen">看到我了</p>
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        seen: true
      }
    })

> 条件循环

<div id="app">
      <ol>
        <li v-for="do in dos">
          {
       { do.text }}
        </li>
      </ol>
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        dos: [
          { text: 'JavaScript' },
          { text: 'Vue' },
          { text: '项目' }
        ]
      }
    })

// v-on 添加一个事件监听器
    <div id="app">
      <p>{
       { message }}</p>
      <button v-on:click="Message">消息</button>
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js'
      },
      methods: {
        Message: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

<div id="app">
      <p>{
       { message }}</p>
      <input v-model="message">
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

> 组件

Vue.component('do-item', {
      template: '<li>dashucoding</li>'
    })

<do-item></do-item>

<div id="app">
     <ol>
     <do-item
          v-for="item in List"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></do-item>
      </ol>
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        List: [
          { id: 0, text: '1' },
          { id: 1, text: '2' },
          { id: 2, text: '吃的东西' }
        ]
      }
    })

计算器：

> 添加class类样式

> `style`

`v-for`

<div id ="app">
     //<p>{
       {list[0]}}</p>
     <p v-for="item in list"> {
       {item}} </p>
     <p v-for="(item,i) in list"> {
       {item}} </p>
    </div>
    
    <p v-for="count in 10">{
       {count}}</p>

v-if 不断创建和删除，不利于重复使用渲染
    v-show 不会删除DOM

v-cloak v-text v-bind v-on
    v-bind :
    v-on @
    v-model : 表单元素
    v-for
    v-if
    v-show
    // 事件修饰符
    .stop .prevent
    .capture
    .self
    .once
    
    v-for 使用key属性 string/number

创建一个`Vue`

var vm = new Vue({
    
    })

var data={a:1};
    var vm = new Vue({
     data: data
    })
    vm.a == data.a // true

生命周期图示

![生命周期图示][1240]

数据绑定

<span> {
       {msg}} </span>
    
    v-once执行一次
    <span v-once> {
       {msg}} </span>
    
    
    <a v-bind:href="url">...</a>
    
    
    <a :href="url">...</a>
    
    
    <a v-on:click="1">...</a>
    
    
    <a @click="1">...</a>

<table> 
 <thead> 
  <tr> 
   <th>目录</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>build</code></td> 
   <td>项目构建</td> 
  </tr> 
  <tr> 
   <td><code>config</code></td> 
   <td>配置目录</td> 
  </tr> 
  <tr> 
   <td><code>mode_modules</code></td> 
   <td><code>npm</code>加载的项目依赖模块</td> 
  </tr> 
  <tr> 
   <td><code>src</code></td> 
   <td>开发的目录</td> 
  </tr> 
  <tr> 
   <td><code>static</code></td> 
   <td>静态资源目录</td> 
  </tr> 
  <tr> 
   <td><code>test</code></td> 
   <td>初始测试目录</td> 
  </tr> 
  <tr> 
   <td><code>index.html</code></td> 
   <td>入口文件</td> 
  </tr> 
  <tr> 
   <td><code>package.json</code></td> 
   <td>项目配置文件</td> 
  </tr> 
 </tbody> 
</table>

实例：

<div id="vue_">
        <h1>{
       {site}}</h1>
        <h1>{
       {url}}</h1>
        <h1>{
       {det()}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_',
            data: {
                site: "123",
                url: ".com"
            },
            methods: {
                det: function() {
                    return  this.site;
                }
            }
        })
    </script>

v-html="message"
    
    v-bind:class="{'class1': use}"
    
    v-bind:id="id"
    
    <script>
    new Vue({
      el: '#app',
      data: {
        id : 1
      }
    })
    </script>
    
    v-if="seen"
    
    <pre><a v-bind:href="url">123</a></pre>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        url: '123456'
      }
    })
    </script>

<div id="app">
        <p>{
       { message }}</p>
        <input v-model="message">
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        message: '123456!'
      }
    })
    </script>

v-if v-else v-else-if
    
    <div id="app">
      <ul>
        <li v-for="n in 10">
         {
       { n }}
        </li>
      </ul>
    </div>
    
     <div id="app">
      {
       { message.split('').reverse().join('') }}
    </div>

> `Vue`代码

<body>
      <div id="app">
        <p>{
       { msg }}</p>
      </div>
    
      <script>
        //  vm 对象就是 MVVM中的 VM调度者
        var vm = new Vue({
          el: '#app',  // 表示当前要控制页面上的哪个区域
          //  data 就是 MVVM中的 M
          data: { 
            msg: '欢迎' 
          }
        })
      </script>
    </body>

> `v-cloak`, `v-bind:`, `v-on:` 学习

<body>
      <div id="app">
        
        <p v-cloak> {
       { msg }} </p>
        <h4 v-text="msg">1</h4>
        
        
    
        <div>{
       {msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2">111</div>
        
        
        
        
    
        <input type="button" value="按钮" @click="show">
      </div>
      <script src="./lib/vue-2.4.0.js"></script>
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '<h1>1111</h1>',
            my: '11111'
          },
          methods: { 
            show: function () {
              alert('Hello')
            }
          }
        })
      </script>
    </body>

> 倒序效果

<body>
      
      <div id="app">
        <input type="button" value="1" @click="lang">
        <input type="button" value="2" @click="stop">
        <h4>{
       { msg }}</h4>
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: 'dashu',
            intervalId: null
          },
          methods: {
            lang() {
              if (this.intervalId != null) return;
    
              this.intervalId = setInterval(() => {
                var start = this.msg.substring(0, 1)
                var end = this.msg.substring(1)
                this.msg = end + start
              }, 600)
    
            },
            stop() { 
              clearInterval(this.intervalId)
              this.intervalId = null;
            }
          }
        })
      </script>
    </body>

> 事件修饰符

`.stop` 阻止冒泡  
`.prevent` 阻止默认行为  
`.capture` 实现捕获事件的机制  
`.self` 实现只点击当前元素，才会触发事件  
`.once` 只触发一次事件

> `v-model` 指令

> 计算器

var Str = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
    this.result = eval(Str)

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>dashu</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
        <input type="text" v-model="n1">
    
        <select v-model="opt">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
    
        <input type="text" v-model="n2">
    
        <input type="button" value="=" @click="calc">
    
        <input type="text" v-model="result">
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            n1: 0,
            n2: 0,
            result: 0,
            opt: '+'
          },
          methods: {
            calc() { 
    
              switch (this.opt) {
                case '+':
                  this.result = parseInt(this.n1) + parseInt(this.n2)
                  break;
                case '-':
                  this.result = parseInt(this.n1) - parseInt(this.n2)
                  break;
                case '*':
                  this.result = parseInt(this.n1) * parseInt(this.n2)
                  break;
                case '/':
                  this.result = parseInt(this.n1) / parseInt(this.n2)
                  break;
              } 
    
            }
          }
        });
      </script>
    </body>
    
    </html>

> `vue`样式

<h1 class="red"></h1>
    
    <h1 :class=" [ 'red', 'green' ] "></h1> 绑定数组
    
    <h1 :class=" [ 'red', 'green', flag?'active':'' ] "></h1> 三元表达式
    
    <h1 :class="classObj">123</h1>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            flag: true,
            classObj: { red: true, green: true, active: false }
          },
          methods: {}
        });
      </script>
    
    样式：
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>dashu</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
        
    
        <h1 :style="[ ss, ee ]">123</h1>
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            ss: { color: 'red', 'font-weight': 200 },
            ee: { color: 'red' }
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>

> `for` 循环

// 数组对象
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>dashu</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
        <p v-for="(item, i) in list">{
       { item.id }} - {
       { item.name }} - {
       {i}}</p>
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            list: [
              { id: 1, name: 'd' },
              { id: 2, name: 'dd' },
              { id: 3, name: 'ddd' },
              { id: 4, name: 'dddd' }
            ]
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>

// 循环对象
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>dashu</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
        <p v-for="(val, key, i) in user">{
       { val }} -- {
       {key}} -- {
       {i}}</p>
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            user: {
              id: 1,
              name: 'da',
              gender: '男'
            }
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>

// 迭代数字
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>dashu</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
        <p v-for="count in 6"> {
       { count }} </p>
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {}
        });
      </script>
    </body>
    
    </html>

> `key`属性使用

<p v-for="item in list" :key="item.id">
     <input type="checkbox">{
       {item.id}} --- {
       {item.name}}
    </p>
    
    add() { 
     this.list.unshift({ id: this.id, name: this.name })
    }

`v-if` 每次都会重新删除和创建元素，性能消耗高  
`v-show` 每次不会重新创建，初始渲染消耗高

`vue` 中绑定样式两种方法：

v-bind: class     v-bind:style

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

![努力努力再努力Jeskson][Jeskson]

[Web_-Vue.js]: /images/20210724/fa52a20ba0fe492db7068d85f87ff29f.png
[1240]: /images/20210724/b83565a32c7a4a418e753e6c369cc66a.png
[Jeskson]: /images/20210724/d810700d3ada4d65b479d11615793ece.png