精华内容
下载资源
问答
  • vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件,支持模型操作和模型点击事件,能自动缩放模型到合适大小并校正偏移,支持多种格式的模型。 ...

    vue-3d-model

    vue.js 3D model viewer component, based on threejs, inspired by model-tag

    一个展示三维模型的Vue组件,支持模型操作和模型点击事件,能自动缩放模型到合适大小并校正偏移,支持多种格式的模型。

    vue-3d-model:一个展示三维模型的 Vue 组件

    Example

    DEMO

    Install

    using npm

    npm install vue-3d-model --save
    

    Or using script tag for global use

    <script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.min.js"></script>
    

    Or Download vue-3d-model.min.js and include it in your html

    Usage

    <template>
        <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
    </template>
    <script>
        import { ModelObj } from 'vue-3d-model'
    
        export default {
            components: { ModelObj }
        }
    </script>
    

    Or

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="app">
            <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
        </div>
        <script src="vue.js"></script>
        <script src="vue-3d-model.min.js"></script>
        <script>
            new Vue({
                el: '#app'
            })
        </script>
    </body>
    

    Documents

    props

    prop type default example
    src string - './exapmle.obj'
    width number - 300
    height number - 300
    position object { x: 0, y: 0, z: 0 } { x: 100, y: 20, z: -10 }
    rotation object { x: 0, y: 0, z: 0 } { x: Math.PI / 2, y: 0, z: - Math.PI / 4 }
    scale object { x: 1, y: 1, z: 1 } { x: 2, y: 2, z: 3 }
    lights array -  
    backgroundColor number/string 0xffffff 0xffffff/'#f00'/'rgb(255,255,255)'
    backgroundAlpha number 1 0.5
    controllable boolean true true/false

    events

    event
    on-mousedown
    on-mousemove
    on-mouseup
    on-click
    on-load
    on-progress
    on-error

    Model Format Support

    model format component tag
    obj <model-obj>
    json <model-three>
    stl <model-stl>
    dae <model-collada>
    ply <model-ply>
    gltf(2.0) <model-gltf>

    Browser Support

    Modern browsers and IE 11.

    You can click on this for more information

    TODO List

    • Support for more model formats
    • Animation
    • Post-processing

    LICENSE

    MIT

    查看原文: vue-3d-model:一个展示三维模型的 Vue 组件

    展开全文
  • 文章目录vue3自定义组件v-model实例vue3自定义v-model的优点(较vue2) vue3自定义组件v-model实例 注意:我这里是typescript的语法,只是有个别地方和js相比要确定一下类型,比如函数传参时,和使用input元素的...

    vue3自定义组件v-model实例

    注意:我这里是typescript的语法,只是有个别地方和js相比要确定一下类型,比如函数传参时,和使用input元素的value时

    父组件App.vue

    <template>
      <div>
        <InputModel v-model="inputVal"/>
        <span>{{inputVal}}</span>
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent,ref } from 'vue';
    import InputModel from './components/InputModel.vue'
    
    
    export default defineComponent({
      name: 'App',
      components: {
        InputModel,
      },
      setup(){
        const inputVal = ref('hello')
        return{
          inputVal
        }
      }
    });
    </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>
    
    

    子组件 InputModel.vue

    <template>
      <div>
        <input type="text" 
        @input="updateVal"
        :value="changeVal"
        />
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent , ref} from 'vue';
    
    
    export default defineComponent({
      props:{
        modelValue:String,
    
      },
      setup(props,context){
        // console.log(props.modelValue);
        
        const changeVal = ref(props.modelValue)
        const updateVal = (e: KeyboardEvent)=>{
          // console.log((e.target as HTMLInputElement).value);
    
          //获取到input元素里面的值,
          const targetVal = (e.target as HTMLInputElement).value 
          // console.log(changeVal.value);
    
          // 令两个值相等(传过来的值和输入的值)
          changeVal.value = targetVal
    
          // 发送事件和值
          context.emit('update:modelValue',targetVal)
    
        }
    
        return{
          updateVal,
          changeVal
        }
      }
    });
    </script>
    
    
    
    

    vue3自定义v-model的优点(较vue2)

    不知道vue2的自定义v-model的可以点击:
    vue一些高级特性
    的第一栏目观看

    vue2的缺点:

    • 比较繁琐,子组件还要增加一个model属性
    • 智能由于双向绑定多个值,不能够多个

    vue3的提升:

    • 完全摒弃了model属性
    • 可以绑定多个值,因为直接传入的是函数
    展开全文
  • vuemodel选项

    万次阅读 多人点赞 2019-05-15 15:01:08
    今天在看vue-property-decorator时,遇到了@Model选项,也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定,对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一...

     

     

     

    今天在看vue-property-decorator时,遇到了@Model选项,也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定,对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一个回顾,加深印象后,再去理解model选项到底是做什么的,有什么作用。

    vue中的v-model指令实现了表单的双向绑定,这是官网的一个栗子:

    <input type="text" v-model="message">
    <p>{{message}}</p>

    v-model只是语法糖,真正的实现形式:

    <input type="text" :value="message" @input="message = $event.target.value">

    1.将输入框的值绑定到message变量上,这只是单向的,改变message的值可以改变input的value,但是改变input的输入不会改变message。

    2.监听input事件,当输入类内容时改变message变量,从而实现了双向绑定。

    从官网上看到,v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件:

    text和textarea元素使用value属性和input事件

    checkbox和radio使用checked属性和change事件

    select使用value和change事件

    那么我们知道原理后,可以试着实现自定义输入框组件的v-model,即双向绑定

    // js部分
    Vue.component('custom-input',{
        // 1.监听input,输入时触发自定义组件内部的updateVal事件
        template: `<input :value='value' @input='updateVal($event.target.value)' type='text'></input>`,
        // 5.通过props传递,实现父组件值绑定到输入框的value
        props: ['value'],
        methods: {
            // 2.触发父组件上的input事件
            updateVal(val){
                this.$emit('input', val);
            }
        }
    });
    
    var app = new Vue({
        el: '#app',
        data(){
            price: ''
        },
        methods: {
            // 3.传递过来的值赋给父组件的price变量,实现了输入框到父元素的单向绑定
            onInput(val){
                this.price = val;
            }
        }
    })
    // HTML部分
    <div id="app">
        // 4.父组件的value值绑定到price
        <price-input :value="price" @input="onInput"></price-input>
    </div>

    通过上面的分析,默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定,因为自定的组件并没有默认的value和input事件,在使用时,我们需要按照上面那样显式的去声明定义这些东西。这时,model选项就派上用场了,在定义组件的时候,指定prop的值和监听的事件。

    Vue.component('my-input',{
        model: {
            prop: 'uname',
            // 随便命名事件,对应下面$emit即可
            event: 'changeXXX'
        },
        props: {
            uname: {
                type: String,
                default: 'tom'
            }
        },
        methods: {
            updateVal(val){
                this.$emit('changeXXX',val)
            }
        }
    })
    <template>
        <input type="text" :value="uname" @input="updateVal($event.target.value)">
    </template>

    父组件内使用时,使用v-model就可以啦

    // name是父组件中的属性
    <my-input v-model="name" value="some value"></my-input>
    <p>{{name}}</p>

    等价于

    <my-input :uname='name' @changeXXX='val => {foo = val}' value='some value'></my-input>

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • vue-class-modelvue中使用面向对象class开发,使class的公有数据双向绑定; 如果不需要使用双向绑定可以将属性通过Symbol私有化 安装 npm install vue-class-model or yarn add vue-class-model 配置 // model/...

    遇到个比较好用的新插件推荐
    将class类的public的数据在vue中实现双向绑定,使用起来比较方便
    class中处理类型数据,和dom操作分开
    方便开发使用

    vue-class-model

    在vue中使用面向对象class开发,使class的公有数据双向绑定;

    如果不需要使用双向绑定可以将属性通过Symbol私有化

    安装

    npm install vue-class-model
    or 
    yarn add vue-class-model
    

    配置

    // model/hello.js
    class Hello{
      // constructor如果有参数传入需要配置默认值
      // 目前需要自己创建init方法初始化数据
      constructor(){
        // msg双向绑定,数据修改后组件会更新
        // 目前对对象,数组可能存在bug,正在后续开发
        this.msg = 'Hello'
      }
      // 初始化方法名不一定是init,你可以自己命名
      init(m){
        this.msg = m
      }
      setMsg(v){
        this.msg = v
      }
    }
    
    // main.js
    import Vue from 'vue'
    import Models from 'vue-class-model'
    import Hello from './model/hello.js'
    Vue.use(Models)
    
    const model = new Models({
      hello: Hello
    })
    
    // 配置好后可以在所有组件中使用,
    // 使用class变量this.$model.hello.msg
    // 使用class方法this.$model.hello.setMsg('Bye')
    new Vue({
      el:'#app',
      model
    })
    
    展开全文
  • Vue 自定义组件的 v-model Vue 组件的提供 model 选项自定义组件的 v-model 属性。 model 选项的值是一个对象,包含两个参数: prop - [String] 一个属性名 这个属性需要在 props 中声明 v-model 会传入这个属性 ...
  • 使用Vue的开发人员肯定对Vue2中的v-model非常熟悉,大家平常写起来也非常顺手,但是v-modelvue3中发生了较大的变化。这里简单阐述一下Vue3中v-model新语法的使用以及为什么有新的语法。Vue2.x中v-model的使用以及...
  • vue集成vue-3d-model预览3D模型

    千次阅读 2020-06-30 16:57:16
    1、新增vue-3d-model依赖 npm installvue-3d-model 或者 yarn addvue-3d-model 2、使用 若模型路径为项目内路径,则需要将模型放在vue项目根目录下 项目中如下使用 否则会报如下错误: 若路径为服务器...
  • vue 3d模型 vue-3d-model

    2021-02-05 16:03:04
    npm install vue-3d-model --save 或使用脚本标签供全球使用 在vue的HTML中引入script 不用全局引入vue-3d-model在哪里用在哪里引入 下面有链接自行查看 用法 <template> <div class="demo-block-preview...
  • SystemVue model buiilder

    2015-07-29 02:05:32
    为什么用systemVue2013.08sp1 Create Model Builder Project时老是显示Failed to create project since CMake exited abnormally.
  • Ant design vue formModel

    2021-02-06 18:40:49
    Ant design vue formModel 在使用 ant-design-vue 的formModel 组件时,遇到了一些问题,简单记录一下 为什么要使用 formModel组件, 而不是form组件? 因为要动态处理一个表单,表单可以进行临时的增加和删除一些...
  • vue组件model应用

    2019-04-03 11:06:13
    Vue.component('weiji-input', { model: { prop: 'wjlx', event:'selectweiji' }, props:['wjlx'], data: function () { return { }; }, computed:{ ...
  • vuemodel属性

    2020-12-28 14:58:21
    默认情况下,一个组件上的 v-model 会把 value 用作prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。 &...
  • vue选项之model

    2019-10-18 10:55:45
    今天看vue api官方文档,看见选项/其他下的model有点看不懂,后面自己查资料实现了一下才明白用法。 实现全部代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
  • Vue - v-model

    2020-11-06 11:45:51
    Vue学习(四)- v-model v-model可以在表单控件或者组件上创建双向绑定。 双向绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-model</title> &...
  • vue3与vue2 的v-model差别

    2020-09-22 13:47:21
    v-model 指令在 vue 2.x 和 vue 3.0 存在一些差别: 2.x 中 v-model 语法糖底层使用的是 :value 和 emit(‘input’), 绑定属性值是 value 3.0 中可以绑定一个自定义值,支持统一组件绑定多个 v-model,v-model:...
  • Vue Typescript @Model

    2020-12-04 17:52:32
    默认情况下, 一个组件上的v-model会: 将 value用作 prop 将 input用作 event 语法: model: {prop?: string, event?: string} <!-- * @Author: your name * @Date: 2020-12-02 17:02:24 * @...
  • Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识。 在 Vue 中,有许多方法和 Angular 相似,这主要是...
  • vue-property-decorator,@Model选项,也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定,对这个model选项突然不是很理解。所以这里 重新对v-model和自定义组件的v-model做一个回顾,加深印象...
  • vue v-model

    千次阅读 2017-07-31 19:57:41
    对于v-model指令,一开始并没有引起我的注意,看到这个命令我仅仅只是在vue官网上查了一下,简单的就几个字。在表单控件或者组件上创建双向绑定。于是我找到菜鸟教程中的一个实例,如是照着它的样子粗劣的写了一下...
  • vue 中 v-model 指令的基本使用 1 简述 vue 中 v-model 用来获取和设置 表单中的值 2 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport...
  • vue显示3d模型使用vue-3d-model 1. 下载 npm install vue-3d-model --save 引入组件,可支持7种模型文件类型 类型 对应组件 obj <model-obj> json <model-three> stl <model-st> ...
  • Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识。 在 Vue 中,有许多方法和 Angular 相似,这主要是...
  • 这里写自定义目录标题 父子组件通信,都是...3、父组件使用: v-model 第一种曾经被废除过,由于维护成本的原因被删掉,但经过证实,确实有存在的意义,又被加上。 第一种: 父组件: 子组件: {{'里面
  • npm install vue-3d-model --save 或使用脚本标签供全球使用 < script src =" https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js " > </ script > 或下载并将其包含在您的html中 用法 < ...
  • vue中关于checkbox数据绑定v-model指令的个人理解

    万次阅读 多人点赞 2018-06-07 15:16:45
    vue.js未开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见,下面是最常见的例子:&lt;div id='myApp'&gt;&lt;input type="text" v-model="msg"&gt;&lt;br...
  • 本篇文章给大家分享了vue v-model动态生成的相关知识点以及实例代码,有兴趣的朋友参考学习下。
  • 1、Vue中v-model的实现原理 组件 v-model 可以看成是 value+input 方法 的语法糖 <el-checkbox :value="" @input=""></el-checkbox> <el-checkbox v-model="check"></el-checkbox> 原理: ...
  • Vue之v-model解析

    千次阅读 2018-11-26 21:00:25
    今天介绍Vue.js中一种常用的指令:v-model,以及v-model指令特性带来的一些使用。 具体分析 依旧是以简单实例为引去分析Vue.js中针对v-model的处理,具体实例: &lt;input v-model="text" /&gt; &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,678
精华内容 8,271
关键字:

modelvue

vue 订阅