vue前端使用unity3D vue unity

转载

墨染心语 2024-05-22 21:48:38

文章标签 vue前端使用unity3D vue Vue 数据绑定 vue.js 文章分类 游戏开发

一、Vue.js的基本认识

1、官网

2、简介

渐进式JavaScript 框架（核心 + 扩展）

作者：尤雨溪(一位华裔前 Google 工程师)

作用：动态构建用户界面

3、优点

体积小：压缩后33K

更高的运行效率：基于虚拟dom

双向数据绑定：不操作dom，关注业务逻辑

生态丰富、学习成本低：入门容易，学习资料多

二、第一个Vue应用

1、引入脚本库

vue前端使用unity3D vue unity_vue.js

创建文件夹05-vue，复制vue.js，创建 01-hello.html，创建

<script src="vue.js"></script>

输入!快速创建html模板

2、数据绑定

<body>
        <!-- id标识vue作用的范围，绑定的数据必须写在这个div内部 -->
        <div id="app">
            <!-- {{}} 插值表达式，声明式渲染，绑定vue中的data数据 -->
            {{ message }}
        </div>
        <script src="vue.js"></script>
        <script>
            // 创建一个vue对象
            // Vue构造函数的参数是一个配置对象，对象中的key是一些固定的关键字
            new Vue({
                el: '#app', //绑定vue作用的范围，用id选择器选中div
                data: {
                    //在data中注册变量，用于视图中的数据绑定
                    message: 'Hello Vue!',
                }
            })
        </script>
    </body>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

data: {
        message: 'Hello Vue!'
    }

也可以写成

data() {
        return {
            message: 'Hello Vue!'
        }
    }

三、数据绑定指令

1、数据绑定指令

step1：创建 02-数据绑定指令.html

step2：引入脚本，创建Vue对象

<script src="vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        company: '必应',
        site: 'http://www.biying.com'
      }
    })
  </script>

step3：使用数据绑定指令做数据渲染

<div id="app">
        <a v-bind:href="site" target="_blank">{{company}}</a>
        <input type="text" v-bind:value="company">
    </div>

v-bind: 指令的简写形式

<!-- v-bind: 指令的简写形式 : -->
    <a :href="site" target="_blank">{{company}}</a>
    <input type="text" :value="company">

2、双向数据绑定指令

step1：创建 03-双向数据绑定指令.html

step2：将02的代码复制到03

step3：将 v-bind:value 修改成 v-model

<!--  v-bind:value 单向数据绑定  -->
    <input type="text" v-bind:value="company">
    <!--  v-model 双向数据绑定  -->
    <input type="text" v-model="company">

左数第2个，是双向数据绑定的元素，修改了它之后，所有使用company字段的元素，都发生了变化，这就是双向绑定的效果。

vue前端使用unity3D vue unity_Vue_02

页面的内容是根据数据模型渲染出来的，如果修改了页面的内容，那它会反向的作用于数据模型

因为它已经反向作用于数据模型了，那页面上其它依赖数据模型的内容也会做相应的修改

什么是双向数据绑定？

当数据发生变化的时候，视图也会跟着发生变化

数据模型发生了改变，会直接显示在页面上

当视图发生变化的时候，数据也会跟着同步变化

用户在页面上的修改，会自动同步到数据模型中去

注意：v-model只用于用户交互组件中

四、理解MVVM

1、安装Vue.js devtools

离线安装
先解压Vue.jsDevtools
然后在Chrome中加载已解压的扩展程序
使用Vue插件

2、MVVM

Model View ViewModel

vue前端使用unity3D vue unity_数据绑定_03

ViewModel会监听View的变化，一旦View发生了变化，会将其反向作用于Model上

五、绑定事件监听

创建 04-绑定事件监听.html

使用 v-on 进行事件绑定，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<body>
    <div id="app">
      <button v-on:click="hello('helen')">点击事件</button>
      <button v-on:click="study()">study</button>
      <!-- v-on 指令的简写形式 -->
      <button @click="study()">study</button>
    </div>

    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          hello(username) {
            alert('hello ' + username)
          },
          study() {
            alert('go to study')
          },
        },
      })
    </script>
  </body>

六、计算属性

创建 05-计算属性.html

<body>
    <div id="app">
      <input type="text" v-model="message" />
      <p>{{message}}</p>
      <!-- 缺点：大量的业务逻辑写在了视图中，页面代码不简洁 -->
      <p>反转字符串：{{message.split('').reverse().join('')}}</p>

      <!-- 计算属性：只要message没有发生变化，这个方法就执行一次 -->
      <!-- 以后每一次的调用，都会从浏览器中的缓存读取 -->
      <p>计算属性：{{reversedMessage}}</p>
      <p>计算属性：{{reversedMessage}}</p>
      <p>计算属性：{{reversedMessage}}</p>

      <!-- 方法：也不是很合适，如果里面的值要使用多次的话，则会调用多次方法-->
      <p>方法：{{reversed()}}</p>
      <p>方法：{{reversed()}}</p>
      <p>方法：{{reversed()}}</p>
    </div>

    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            message: 'hello',
          }
        },

        computed: {
          reversedMessage() {
            console.log('计算属性被调用')
            return this.message.split('').reverse().join('')
          },
        },

        methods: {
          reversed() {
            console.log('方法被调用')
            return this.message.split('').reverse().join('')
          },
        },
      })
    </script>
  </body>

计算属性的例子：计算属性的单向绑定和双向绑定

创建 06-计算用户全名.html

<body>
    <div id="app">
      姓：<input type="text" v-model="firstName" /><br />
      名：<input type="text" v-model="lastName" /> <br />
      姓名：<input type="text" v-model="fullName" /> <br />
      姓名2：<input type="text" v-model="fullName2" />
    </div>

    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            firstName: 'helen',
            lastName: 'yao',
          }
        },

        computed: {
          // 这种方式相当于getter，但是没有setter
          // 所以无法完成双向数据绑定
          fullName() {
            console.log('fullName计算属性')
            return this.firstName + ' ' + this.lastName
          },

          // 因为里面有两个方法，所以要改成属性的方式
          // 这两个方法是固定的不能改名
          fullName2: {
            get() {
              console.log('fullName计算属性get()')
              return this.firstName + ' ' + this.lastName
            },

            set(value) {
              console.log('输入的值是：' + value)
              const names = value.split(' ')
              this.firstName = names[0]
              this.lastName = names[1]
            },
          },
        },
      })
    </script>
  </body>

七、监视

创建 07-监视.html

<body>
    <div id="app">
      姓：<input type="text" v-model="firstName" /><br />
      名：<input type="text" v-model="lastName" /> <br />
      <!-- 只要里面的值不发生变化，里面的方法就只执行一次 -->
      姓名：<input type="text" v-model="fullName" /> <br />
      姓名：<input type="text" v-model="fullName" /> <br />
      姓名：<input type="text" v-model="fullName" /> <br />
    </div>

    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            firstName: 'helen',
            lastName: 'yao',
            fullName: '',
          }
        },
        // 方法名要与上面的属性名一致
        // 一旦上面的属性发生了变化，
        // 下面的方法就会跟着被调用
        watch: {
          firstName(value) {
            console.log('监视firstName')
            this.fullName = value + ' ' + this.lastName
          },

          lastName(value) {
            console.log('监视lastName')
            this.fullName = this.firstName + ' ' + value
          },
          // 再监听姓名则可以实现双向数据绑定
          fullName(value) {
            const names = value.split(' ')
            this.firstName = names[0]
            this.lastName = names[1]
          },
        },
      })
    </script>
  </body>

八、条件渲染

创建 08-条件渲染.html

<body>
    <div id="app">
      <!-- 删除 创建 -->
      <!-- 如果进行频繁的删除创建，比较耗性能，创建了之后不再更改的话，一般用这个 -->
      <input type="checkbox" v-model="ok" />是否同意许可协议<br />
      <button v-if="ok">下一步if</button>
      <button v-else disabled>下一步else</button>

      <!-- 显示 隐藏 -->
      <!-- 因为第一次要创建多个，所以比较耗内存，但是如果要频繁操作的话，一般用这个 -->
      <button v-show="ok">下一步show</button>
      <button v-show="!ok" disabled>下一步not show</button>
    </div>

    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            ok: false,
          }
        },
      })
    </script>
  </body>

九、列表渲染

创建 09-列表渲染.html

<body>
    <div id="app">
      <ul>
        <li v-for="(item,index) in userList">
          序号：{{index+1}} 姓名：{{item.username}} 年龄：{{item.age}}
        </li>
      </ul>
    </div>

    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            userList: [
              { username: 'qwe', age: 18 },
              { username: 'qw', age: 19 },
            ],
          }
        },
      })
    </script>
  </body>

十、实例生命周期

创建 10-实例的生命周期.html

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

分析生命周期相关方法的执行时机

<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '床前明月光'
        },
        // 页面在内存中已经初始化完毕：
        // 可以操作 data 中的数据、调用methods中的方法
        // 但是数据尚未被渲染到页面中：用户看不见
        created() {
            console.log('created')
            //可以操作 data 中的数据
            console.log(this.message)
            //可以调用methods中的方法
            this.show()
            //无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容
            console.log(document.getElementById('h3').innerText)
        },
        
        // 数据已经被渲染到页面中
        mounted() { // 第四个被执行的钩子方法
            console.log('mounted')
            //可以取出dom节点取数据，说明用户已经在浏览器中看见内容
            console.log(document.getElementById('h3').innerText)
        },
        
        methods: {
            show() {
                console.log('show方法被调用')
            }
        },
    })
</script>

综合案例

创建：综合案例.html

<body>
    <div id="app">
      <table>
        <tr>
          <td>id</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>email</td>
        </tr>
        <tr v-for="(item,index) in userList">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.email}}</td>
        </tr>
      </table>
    </div>

    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            userList: [],
          }
        },

        created() {
          this.getUserList()
        },

        methods: {
          // 创建请求链接
          getUserList() {
            const request = axios.create({
              baseURL: 'http://localhost:8080',
            })
            // 发送请求
            request
              .get('/user/list')
              .then((response) => {
                console.log('数据获取成功', response.data)
                this.userList = response.data
              })
              .catch((error) => {
                console.log('数据获取失败', error)
              })
          },
        },
      })
    </script>
  </body>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。