优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)

简介: 优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)

优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(一):https://developer.aliyun.com/article/1497228

Vue指令系统的常用指令

在jquery中,我们有很多标签操作方法,找标签,获取标签,生成标签,在标签里面塞文本等等。这些现在都可以用vue的指令系统来实现

指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

在vue中,提供了很多指令,常用的有:v-html、v-text、v-if、v-model、v-for等等。

v-text

以文本字符串方式显示指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

在vue中,提供了很多指令,常用的有:v-html、v-text、v-if、v-model、v-for等等。

v-text

以文本字符串方式显示

使用v-text方式,也是以字符串方式展示,v-text= 属性名。它和{{}}做的事情是一样的

如果想把v-text放到 其他标签中,直接加进去就可以

里面可以用js的语法

v-html

如果M那里是html标签,想展示成标签效果,可以使用v-html

就展示成了a链接效果

v-if 和v-show

vue中提供了两个指令可以用于判断是否要 显示元素,分别是v-if和v-show。

<!--    这里表示num如果大于20,浏览器就展示a链接,否则不显示。根据判断的布尔结果值来判断-->
    <a href="http://www.baidu.com" v-if="num >20">百度</a>

现在啥也没显示

把num的值改为21,浏览器就展示了a链接

可以结合v-else-if v-else

把num的值改为20

数据一旦发生变化,视图就会自动发生变化,这就是数据驱动视图,以后视图的效果都是通过数据来控制的

动态生成和动态添加,页面需要渲染,页面渲染开销大,效率比较低,所以频繁的显示,不显示,使用动态的隐藏和展示v-show

v-show

标签元素:
            <h1 v-show="ok">Hello!</h1>
  data数据:
          data:{
              ok:false    // true则是显示,false是隐藏
      }

满足条件就显示,不满足就隐藏

把num的值改为9

看到标签display:none 被隐藏,并不是删除

v-show可以直接等于布尔值,决定显示还是隐藏

简单总结v-if和v-show

v-show后面不能v-else或者v-else-if

v-show隐藏元素时,使用的是display:none来隐藏的,而v-if是直接从HTML文档中移除元素[DOM操作中的remove]

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

操作属性v-bind

做动态标签属性

格式:
<标签名 :标签属性="data属性"></标签名>
<!-- v-bind:动态的标签属性控制,简写: -->

显示wifi密码效果:配合v-on事件绑定

v-on 绑定事件 v-on:事件名称= ‘函数’ 简写 @事件名称= ‘函数’

语法:<button v-on:click="showp">{{msg}}</button>
可以简写:<button @click="showp">{{msg}}</button>  <!-- v-on:事件名称简写 @事件名称 -->

<div id="app" >

<!--    <input :type="tt"><button v-on:click="show">{{msg}}</button>-->
    <input :type="tt"><button @click="show">{{msg}}</button>

</div>
<script src="vue.js"></script>
<!--另起一个script标签来写我们的js-->
<script>
    // 首先先实例化一个vue对象,里面传一些参数
    let vm = new Vue({
        el:'#app',   // 此时表示通过vue语法来控制id为app的标签,在这个标签范围内可以使用vue语法,css的选择器都可以用
        
        //可以单体模式,省略function
        data(){
            return {
                // xxattr:'ss',
                tt:'password',
                msg:'显示密码'

            }

        },
        //methods里面写方法,使用单体模式,methods里面的方法,this指的就是vue对象
        methods:{
            show(){
                if (this.tt === 'password'){
                    this.tt ='text';
                    this.msg = '隐藏密码';
                }else {
                    this.tt ='password';
                    this.msg = '显示密码';
                }

            }
        }



    })

</script>

v-on 也可以直接操作数据,进行js运算

v-on控制数据属性的方式
<button v-on:click="num++">按钮</button>   <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>
1. 使用@事件名来进行事件的绑定
   语法:
      <h1 @click="num++">{{num}}</h1>

2. 绑定的事件的事件名,全部都是js的事件名:
   @submit   --->  onsubmit
   @focus    --->  onfocus

商品动态加减示例

<div id="app" >
    <button @click="num+=1">+1</button>
    <input type="text" :value="num">
    <button  @click="num-=1">-1</button>


</div>

如果不控制,可以减到负数,所以通过方法控制下。遇到复杂的逻辑处理时,要给指定各方法做

<script>
    // 首先先实例化一个vue对象,里面传一些参数
    let vm = new Vue({
        el:'#app',   // 此时表示通过vue语法来控制id为app的标签,在这个标签范围内可以使用vue语法
        
        //可以单体模式,省略function
        data(){
            return {
                num: 10
            }
        },
        //里面写方法
        methods:{
            jian() {
                if (this.num > 0) {
                    this.num -= 1
                }
            }
        }
        
    })

</script>

v-model双向数据绑定

v-model数据双向绑定,实现改一个标签的数据,其他标签使用相同属性的字段也同步被修改 代表着这些标签value的属性值,所以取值更快捷了

凡是用户输入数据的地方都可以使用

input select textarea等都可以使用

修改input标签value的值,vue中的data属性值也会发生变化

修改vue中的data属性值,input标签value的值也会发生变化 双向绑定的,双向变化

使用v-model时,如果是用中文输入法输入中文,一般在没有选定词组前,也就是拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发更新。如果希望总是实时更新,可以使用@input代替v-model

单选按钮上使用

单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为否时不选。

好了,本章先讲到这里,相信到这里,很多小伙伴已经掌握到了vue的一些基本用法,后续我们还会持续更新vue更多,更高阶的用法,感兴趣的朋友不妨点赞关注,后面继续体验vue的强大。


相关文章
|
7天前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
9天前
|
JavaScript 前端开发 应用服务中间件
蓝易云 - dockerfile部署前端vue打包的dist文件实战
这样,你的Vue应用就会在Docker容器中运行,你可以通过访问[http://localhost:8080](http://localhost:8080/)来查看你的应用。
102 0
|
12天前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
|
13天前
|
JavaScript 前端开发 API
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
|
13天前
|
资源调度 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
|
13天前
|
JavaScript 前端开发 程序员
【前端开发---Vue2】史上最详细的Vue入门教程(五) --- 细讲‘生命周期’
【前端开发---Vue2】史上最详细的Vue入门教程(五) --- 细讲‘生命周期’
【前端开发---Vue2】史上最详细的Vue入门教程(五) --- 细讲‘生命周期’
|
9天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
15 2
|
26天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
29天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
47 1
|
29天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
12 0