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

超、凢脫俗 2021-09-18 13:24 419阅读 0赞

![Web前端-Vue.js必备框架（三）][Web_-Vue.js]

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

`vue`是一款渐进式`javascript`框架，由`evan you`开发。`vue`成为前端开发的必备之一。

`vue`的好处轻量级，渐进式框架，响应式更新机制。

开发环境，浏览器使用`chrome`，ide：`vs code`或者`webstorm`，`node.js8.9+`，`npm`等

`uni-app`直接使用`<script>`引入`vue.js`，`vue`会被注册为一个全局变量，开发环境不要使用压缩版本，一：开发版本有完整的警告和调式模式，二：生产版本删除了警告。

生产环境：

开发：

<!DOCTYPE html>
    <head>
     <meta charset="utf-8">
     <title></title>
     <link rel="stylesheet" type="text/css" media="screen" href="main.css">
     <script src="main.js"></script>
    </head>
    <body>
    <div id="app">
     {
       { message }}
     <ol>
      <todo-item v-for="item in arrList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
     </ol>
    </div>
    
     <script src="https://cdn.jsdelivr.net/vue@2.6.8/dist/vue.js"></script>
    
    <script>
     Vue.component('todo-item', {
      props: ['todo'],
      template: '<li class="text"> {
       { todo.text }} </li>'
     })
     var app = new Vue({
      el: '#app',
      data: {
       message: 'hello',
       arrList: [{
         id: 0,
         text: 'da'
       },{
         id: 1,
         text: 'shu'
       }]
      }
     })
    </script>
     </body>
    </html>

<body>
     <div id="app">
      {
       {message}}
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
     <script>
      var app = new Vue({
       el: '#app',
       data: {
        message: 'hello',
       }
      })
     </script>
    </body>

vue CLI
    npm install -g @vue/cli
    vue create hello
    cd hello
    npm run serve

属性：自定义属性，原生属性，特殊属性。

组件中`props`中声明属性。

vue组件=vue实例=new Vue(options)

![组件三大核心][1240]

每一个`vue`组件都是一个`vue`实例，`vue`实例通过`new vue`函数创建的。

事件：普通事件，修饰符事件。

@click @input @change 普通事件

@input.trim @click.stop @submit.prevent 修饰符事件

<template>
     <div>
      name: {
       { name || "--" }}
      <br/>
      <input :value="name" @change="handleChange"/>
      <br/>
      <div @click="handleDivClick">
       <buttom @click="handleClick">成功</button> 
       <button @click.stop="handleClick">失败</button>
      </div>
     </div>
    </template>
    
    <script>
    export default {
     name: "EventDemo",
     props: {
      neme: String
     },
     methods: {
      handleChange(e) {
       this.$emit("change",  e.targer.value);
      },
      handleDivClick() {
       this.$emit("change", "");
      },
      handleClick(e) {
       //e.stopPropagation();
      }
     }
    };
    </script>

插槽：普通插槽和作用域插槽。

<a-tab-pane key="event" tab="事件">
     <Event :name="name" @change="handleEventChange"/>
    </a-tab-pane>
    
    <a-tab-pane key="slot" tab="插槽">
     <h2>新语法</h2>
     <$lotDemo>
      <p></p>
      <template v-slot:title>
      <p>title</p>
      <p>tiltle</p>
      </template>
      <template v-slot:item="props">
       <p>item {
       { props }} </p>
      </template>
     <$lotDemo>
     <br/>
    </a-tab-pane>

<template>
     <div>
     <slot/>
     <slot name="title"/>
     <slot name="item" v-bind="{ value: 'vue' }"/>
     </div>
    </template>
    
    <script>
    export default {
     name: "SlotDemo"
    };
    </script>

小结：

属性，自定义属性：`props`，原生属性：`attrs`，特殊属性：`class`，`style`。

事件：普通事件，修饰符事件。  
插槽：普通插槽，作用域插槽。

双向绑定：

`model`数据的更新会导致`view`视图的更新，`view`视图的更新会导致`model`数据的更新。但`vue`是单向数据流，`Object.defineProperty`响应式更新。

// 语法糖
    <Personalnfo
     v-model="phoneInfo"
     :zip-code.sync="zipCode"
    />
    
    <PersonalInfo
     :phone-info="phoneInfo"
     @change="val => (phoneInfo = val)"
     :zip-code="zipCode"
     @update:zipCode="val => (zipCode=val)"
    />

状态`data`和属性`props`

状态是组件自身的数据，属性来自父组件的数据。  
状态和属性的改变都未必会触发更新。

好了！下面开讲：

开发环境版本：

生产环境版本：

新手不建议用`vue-cli`哦！

数据渲染：

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

<div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>
    var app2 = new Vue({
      el: '#app-2',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
      }
    })

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

<div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {
       { todo.text }}
        </li>
      </ol>
    </div>
    var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: '学习 1' },
          { text: '学习 2' },
        ]
      }
    })

<div id="app-5">
      <p>{
       { message }}</p>
      <button v-on:click="reverseMessage">逆转消息</button>
    </div>
    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello dashucoding!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

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

> 组件化：

<div id="app-7">
      <ol>
        
        <todo-item
          v-for="item in gList"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
      </ol>
    </div>
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{
       { todo.text }}</li>'
    })
    
    var app7 = new Vue({
      el: '#app-7',
      data: {
        gList: [
          { id: 0, text: '123' },
          { id: 1, text: '456' }
        ]
      }
    })

创建一个 `Vue` 实例

var vm = new Vue({
      // 选项
    })

![响应][1240 1]

![数据][1240 2]

`$`用于区分与用户定义的属性。

![生命周期][1240 3]

`v-once`执行一次性插值，数据改变后，不会再改变。  
`v-bind:`

修饰符：

`v-bind`和`v-on`

<a v-bind:href="url"></a>
    
    
    <a :href="url"></a>
    
    
    <a v-on:click="do"></a>
    
    
    <a @click="do"></a>

## 结言 ##

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

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

**作者简介**

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

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

[Web_-Vue.js]: /images/20210724/a0e73310c26543fa8123db9c026665e7.png
[1240]: /images/20210724/440e254168ed44f3b5df2c28236f6d7d.png
[1240 1]: /images/20210724/6e0df8d8c7a9420fac37cb96322521da.png
[1240 2]: /images/20210724/287fb7dbdbad405eae6c30fe87d56b80.png
[1240 3]: /images/20210724/7780a2178365438eb49c14c06cf9cc3e.png
[Jeskson]: /images/20210724/e23b750a633a41cda6256e83599ec455.png