当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue简单使用

Vue简单使用

2020年07月17日  | 移动技术网IT编程  | 我要评论

Vue的简单使用

vue是一种采用MVVM（Model View View-Model）架构的Js框架

Vue插值表达式

{{key}}：用于引用Vue内对应key的属性值（当 网络条件不佳时 可能导致浏览器看到源代码 ，即插值闪烁现象，此时可利用v-text标签代替）

  <span>{{name}}</span>  //用于在非标签属性位置引用Vue内属性名为name的值

<span v-text="name"></span>//此处采用v-text即可解决插值闪烁问题

Vue指令

  • v-text：作用于标签上，用来指定标签体文本内容（Vue以纯文本格式解析）
  • v-html: 作用于标签上，用来指定标签体文本内容（Vue以Html格式解析）
  • v-model:作用于标签上，一般用于将标签的Value属性与Vue内相应的属性相互绑定 即Model(Vue)的属性发生改变，View(Html)也将随之发生改变
  • v-on:click(…事件名称)：用于给指定标签绑定指定事件，该属性的值可以直接引用Vue内已定义的函数 也可写js代码，可使用@Click简写；

事件修饰符

配合v-on:click(…动作事件)使用（v-on:click.stop）

  • .stop: 即仅出发绑定的事件（阻止事件冒泡）
  • .prevent: 用于阻止当前对象默认事件的发生
  • capture： 进入事件捕获模式
  • .self: 仅元素自身的事件会发生
  • .once: 绑定的事件仅会被触发一次

对象的遍历

v-for可用于数组或者对象的遍历 :key 可以在遍历的对象发生改变时 html仅渲染改变的值（通过key所指定的唯一标识查找）进而能提高程序运行效率

数组结构的遍历

  <ul>
        <li v-for="(value,index) in users" :key="value.name">
          编号：{{index+1}}  品牌： {{value.brand}} 型号：{{value.model}} 动力：{{value.power}}
        </li>
    </ul>//数组结构的遍历

对象结构的遍历

 <ul>
        <li v-for="(value,key,index) in user">
            属性索引：{{index}}  属性名称：{{key}}  属性值：{{value}}
        </li>
    </ul>//对象结构的遍历

标签的隐藏与显示控制

v-if&v-show能控制所在标签的隐藏与显示
v-if: v-if 底层通过删除对应的标签来实现标签的隐藏

 <span v-if="visible">You can see me now by v-if to remove the tag !!!</span>

v-show：底层通过将对应标签的css display属性改为none来实现标签的隐藏

 <span v-show="!visible">You can see me now by v-show to set the display to none!!!</span>

当进行一次性操作的时候可以采用v-if实现标签的隐藏（可以解决一定的安全隐患），当需要多次实现隐藏操作的时候可采用v-show来提升程序运行效率

标签的固有属性引用Vue属性

利用v-bind:可实现标签的固有属性来引用Vue的内部属性（v-bind:可简写为：）

  <div v-bind:class="{red:color,blue:!color}" style="width: 100px;height: 150px">
        <a href="#" v-on:click="color=!color">click me to change bgc!</a>
    </div>

Vue内部相关属性

其中：

  • el：代表当前Vue对象接管的标签（与Jquery相似的选择器）
  • data:代表当前Vue对象内相关属性
  • -created:代表Vue声明周期的方法（在Vue创建后该方法会被调用）
  • watch:代表当前vue内的属性监测函数（当对应的属性发生改变后该函数会被调用）
  • components:代表当前Vue所引用的Vue局部组件
  • computed：用于对Vue内属性的逻辑计算可直接以名称引用
const vueTest=new Vue({
        el:"#app",
        data:{
            property1:"value1",
            property2:"value2",
            property3:"value3"
        },
        methods:{
            fun1(params1,params2){
                console.log(params1+params2)
            }
        },
        created(){
            console.log(this+"has been created")
        },
        computed:{
		  numCompute(){
                let date = new Date(this.num);
                return date.getFullYear()+"年"+date.getMonth()+"月"+date.getDay()+"日"
            }
        },
        /*Vue属性监测*/
        watch:{
            /*非深度监测 仅监测对象的地址值是否发生改变*/
            num(currentValue,previousValue){
                alert("num has changed to "+currentValue+" from"+previousValue)
            },
            /*深度检测-可检测对象及其属性的变化*/
            user:{
                deep:true,
                handler(currentValue,previousValue){
                    console.log(" name has changed to "+currentValue.name+"from "+previousValue.name)
                }
            }
        },
        components:{
        }
    })

Vue组件之间的通信

Vue之间的组件关系大致可分为父组件，子组件，同级组件三种

子组件引用父组件属性：

  1. 通过子组件的props属性可实现,通过在子组件的标签设置相应的属性来引用父组件的属性
  2. 再通过子组件的props属性来引用子组件标签上自定义的属性即可在子组件内部间接引用父组件的属性

子组件改变父组件属性

  1. 在子组件上自定义事件绑定父组件中的方法（方法内控制父组件属性）
  2. 在子组件中以$emit(eventName,[params…])来触发子组件标签上的相应事件

props的默认值

通过以下格式也可为props内的属性设置相关属性（默认值…）

 props:{
          num:{
              type:String,//设置当前对象的类型
              default:"defaultValue",//设置当前对象的默认值
              requried:false
          }
        }

   <div id="parentComponent">//自定义num属性的值为父组件的num属性
        <child-component :num="num"   v-on:addEvent="add()"  v-on:reduceEvent="reduce()"></child-component>
    </div>


//子组件 $emit()可触发子组件上对应的事件（此处即触发addEvent&reduceEvent事件）
const childComponent={
        template:`<div>
                    <button v-on:click="$emit('addEvent')">add</button>
                    <button v-on:click="$('reduceEvent')">reduce</button>
                    read from parentComponent num={{num}}
                </div>`,
        props:["num"]
    };
//父组件
    const app=new Vue({
        el:"#parentComponent",
        data:{
            num:0
        },
        props:[
          "property1","property2"
        ],
        components: {
            childComponent
        },
        methods:{
            add(){
                this.num++;
            },
            reduce(){
                this.num--;
            }
        }


    });

本文地址：https://blog.csdn.net/andews/article/details/107368288

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网