首页 > 其他分享 >Vue30_指令3

Vue30_指令3

时间：2024-06-20 18:09:55浏览次数：12  
标签：el Vue name -- age Vue30 指令 app

一、什么是指令？

指令 (Directives) 是带有  v-  前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。 

二、插值表达式

　1、花括号

　　格式：

{{表达式}}

　　说明：

    • 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
    • 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
    • 可以直接获取Vue实例中定义的数据或函数

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   {{msg}}
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            msg:"hello vue"
       }
   });
</script>
</body>
</html>

　2、插值闪烁

　　使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的 {{}} ，加载完毕后才显示正确数 据，称为插值闪烁。类似如下的效果（最新vue是几乎没有此问题）：

　　　

　3、v-text和v-html

　　使用v-text和v-html指令来替代 {{}}

　　说明：

    • v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
    • v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染 

　　示例：

　　　改造原页面内容为: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   v-text:<span v-text="msg"></span><br>
   v-html:<span v-html="msg"></span><br>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            msg:"<h2>hello, vue.</h2>"
       }
   });
</script>
</body>
</html>

 

 

　　并且不会出现插值闪烁，当没有数据时，会显示空白。 

三、v-model

　刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双 向绑定，视图（View）和模型（Model）之间会互相影响。

　既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有： 

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components（Vue中的自定义组件）

　基本上除了最后一项，其它都是表单的输入项。

　示例：

　　html： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br>
    <input type="checkbox" value="PHP" v-model="language">PHP<br>
    <input type="checkbox" value="Swift" v-model="language">Swift<br>
    <h2>
       你选择了：{{language.join(",")}}
    </h2>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            language:[]
       }
   });
</script>
</body>
</html>
  • 多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
  • radio对应的值是input的value值
  • input 和 textarea 默认对应的model是字符串
  • select 单选对应字符串，多选对应也是数组 

　　效果：

 

 

　　要使用上图中的chrome浏览器的 vue插件的话；可以找 资料\chrome vue插件\安装说明 查看并安装。

 

四、v-on

　1、基本用法

　　v-on指令用于给页面元素绑定事件。 　　

　　语法：

v-on:事件名="js片段或函数名"

　　简写语法：

@事件名="js片段或函数名"

　　例如 v-on:click='add' 可以简写为 @click='add' 

　　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接写js片段-->
    <button @click="num++">增加</button>
    <!--使用函数名，该函数必须要在vue实例中定义-->
    <button @click="decrement">减少</button>
    <h2>
       num = {{num}}
    </h2>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            num:1
       },
        methods:{
            decrement(){
                this.num--;
           }
       }
   });
</script>
</body>
</html>

 

 

 

　2、事件修饰符

　　在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们 可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 

　　为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。 

    • .stop ：阻止事件冒泡
    • .prevent ：阻止默认事件发生
    • .capture ：使用事件捕获模式
    • .self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
    • .once ：只执行一次 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接写js片段-->
    <button @click="num++">增加</button>
    <!--使用函数名，该函数必须要在vue实例中定义-->
    <button @click="decrement">减少</button>
    <h2>
       num = {{num}}
    </h2>
    <hr>
   事件冒泡测试：<br>
    <div style="background-color: lightblue;width: 100px;height: 100px"
    @click="print('你点击了div')">
        <button @click.stop="print('点击了button')">点我试试</button>
    </div>
    <br>阻止默认事件：<br>
    <a href="http://www.itcast.cn" @click.prevent="print('点击超链接')">传智播客</a>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            num:1
       },
        methods:{
            decrement(){
                this.num--;
           },
            print(msg){
                console.log(msg)
           }
       }
   });
</script>
</body>
</html>

 

 

 

 

五、v-for

　遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。 

　1、遍历数组

　　语法：

v-for="item in items"
    • items：要遍历的数组，需要在vue的data中定义好。
    • item：循环变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">{{user.name}}--{{user.age}}--{{user.gender}}</li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            users:[
               {"name":"黑马","age":8,"gender":"男"},
               {"name":"传智播客","age":12,"gender":"女"},
               {"name":"酷丁鱼","age":4,"gender":"男"}
           ]
       }
   });
</script>
</body>
</html>

　　

　2、数组角标

　　在遍历的过程中，如果需要知道数组角标，可以指定第二个参数：

　　语法：

v-for="(item,index) in items"
    • items：要迭代的数组
    • item：迭代得到的数组元素别名
    • index：迭代到的当前元素索引，从0开始。
<div id="app">
    <ul>
        <li v-for="(user, index) in users">
           {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
</div>

　　

 

 

 

 

　3、遍历对象

　　v-for除了可以迭代数组，也可以迭代对象。语法基本类似 

　　语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
    • 1个参数时，得到的是对象的值
    • 2个参数时，第一个是值，第二个是键
    • 3个参数时，第三个是索引，从0开始
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user, index) in users" :key="index">
           {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(value,key,index) in person">
           {{index}}--{{key}}--{{value}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            users:[
               {"name":"黑马","age":8,"gender":"男"},
               {"name":"传智播客","age":12,"gender":"女"},
               {"name":"酷丁鱼","age":4,"gender":"男"}
           ],
            person:{"name":"传智汇", "age":3, "address":"中国"}
       }
   });
</script>
</body>
</html>

　　

 

 

 

　4、key

　　当 Vue.js 用  v-for  正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将 不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过 的每个元素。

　　如果使用key这个功能可以有效的提高渲染的效率；key一般使用在遍历完后，又增、减集合元素的时候更有意义。 

　　但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需 要为每项提供一个唯一  key  属性。理想的  key  值是每项都有的且唯一的 id。 也就是key是该项的唯一标识。

<ul>
    <li v-for="(item,index) in items" :key="index"></li>
</ul>
    • 这里使用了一个特殊语法： :key="" 后面会讲到，它可以让你读取vue中的属性，并赋值给key属性
    • 这里绑定的key是数组的索引，应该是唯一的 

 

 

 

 

六、v-if和v-show

　1、基本使用

　　v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

　　语法：

v-if="布尔表达式"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <button @click="show = !show">点我</button>
    <h2 v-if="show">
       Hello VueJS.
    </h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            show:true
       }
   });
</script>
</body>
</html>

　　

　2、与v-for结合

　　当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <button @click="show = !show">点我</button>
    <h2 v-if="show">
       Hello VueJS.
    </h2>
    <hr>
    <ul>
        <li v-for="(user,index) in users" v-if="user.gender=='女'">
           {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            show:true,
            users:[
               {"name":"黑马","age":8,"gender":"男"},
               {"name":"传智播客","age":12,"gender":"女"},
               {"name":"酷丁鱼","age":4,"gender":"男"},
               {"name":"传智大学","age":2,"gender":"女"}
           ]
       }
   });
</script>
</body>
</html>

　　

 

 

 

 

 

　3、v-else

　　可以使用 v-else 指令来表示 v-if 的“else 块”： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <button @click="show = !show">点我</button>
    <h2 v-if="show">
       Hello VueJS.
    </h2>
    <hr>
    <ul v-if="show">
        <li v-for="(user,index) in users" v-if="user.gender=='女'" style="backgroundcolor:
 deeppink">
           {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
        <li v-else style="background-color: blue">
           {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            show:true,
            users:[
               {"name":"黑马","age":8,"gender":"男"},
               {"name":"传智播客","age":12,"gender":"女"},
               {"name":"酷丁鱼","age":4,"gender":"男"},
               {"name":"传智大学","age":2,"gender":"女"}
           ]
       }
   });
</script>
</body>
</html>

　　v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

　　

　　v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">
 A
</div>
<div v-else-if="type === 'B'">
 B
</div>
<div v-else-if="type === 'C'">
 C
</div>
<div v-else>
 Not A/B/C
</div>

　　类似于 v-else ， v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。 

 

　　

　4、v-show

　　另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样： 

<h1 v-show="ok">Hello!</h1>

　　不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性 display 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <button @click="show = !show">点我</button>
    <h2 v-if="show">
       Hello VueJS.
    </h2>
    <hr>
    <ul v-if="show">
        <li v-for="(user,index) in users" v-if="user.gender=='女'" style="backgroundcolor:
 deeppink">
           {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
        <li v-else style="background-color: blue">
           {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
    <hr>
    <h2 v-show="show">
       你好；黑马！
    </h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            show:true,
            users:[
               {"name":"黑马","age":8,"gender":"男"},
               {"name":"传智播客","age":12,"gender":"女"},
               {"name":"酷丁鱼","age":4,"gender":"男"},
               {"name":"传智大学","age":2,"gender":"女"}
           ]
       }
   });
</script>
</body>
</html>

　　

 

 

 

七、v-bind

　1、属性上使用vue数据

　　看这样一个案例； 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
       }
        .red {
            background-color: red;
       }
        .blue {
            background-color: blue;
       }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <div class="">
       点击按钮改变背景颜色。
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            color:"red"
       }
   });
</script>
</body>
</html>

　　解读：

    • 页面有两个按钮，点击时，会改变Vue实例中的color值，这个值与前面定义的CSS样式一致。
    • 目前div的class为空，希望实现点击按钮后，div的class样式会在.red和.blue之间切换 

　　该如何实现？

　　大家可能会这么想，既然color值会动态变化为不同的class名称，那么我们直接把color注入到class属性就好了，于是就这样写： 

<div class="{{color}}"></div>

　　这样写是错误的！因为插值表达式不能用在标签的属性中。

　　此时，Vue提供了一个新的指令来解决：v-bind，语法：

v-bind:属性名="Vue中的变量"

　　例如，在这里我们可以写成： 

<div v-bind:class="color"></div>

　　不过，v-bind太麻烦，因此可以省略，直接写成： :属性名='属性值' ，即： 

<div :class="color"></div>

　　

 

 

 

 

　2、class属性的特殊用法

　　上面虽然实现了颜色切换，但是语法却比较啰嗦。

　　Vue对class属性进行了特殊处理，可以接收数组或对象格式

　　对象语法

　　　　可以传给 :class 一个对象，以动态地切换 class： 

<div :class="{ red: true,blue:false }"></div>
    • 对象中，key是已经定义的class样式的名称，如本例中的： red 和 blue
    • 对象中，value是一个布尔值，如果为true，则这个样式会生效，如果为false，则不生效。 

　　之前的案例可以改写成这样： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
       }
        .red {
            background-color: red;
       }
        .blue {
            background-color: blue;
       }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <div :class="color">
       点击按钮改变背景颜色。
    </div>
    <hr><br>
    <button @click="bool=!bool">点我改变下面色块颜色</button>
    <div :class="{red:bool,blue:!bool}">
       点击按钮改变背景颜色。
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            color:"red",
            bool: true
       }
   });
</script>
</body>
</html>
    • 首先class绑定的是一个对象： {red:bool, blue: !bool}
      • red和blue两个样式的值分别是bool和!bool，也就是说这两个样式的生效标记恰好相反，一个生效，另一 个失效。
      • bool默认为true，也就是说默认red生效，blue不生效
    • 现在只需要一个按钮即可，点击时对bool取反，自然实现了样式的切换 

　　

 

 

八、计算属性

　在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

　但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，有一个日期的数 据，但是是毫秒值：

data:{
    birthday:1429032123201 // 毫秒值
}

　　在页面渲染，希望得到yyyy-MM-dd的样式则需要如下处理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <h2>
       你的生日为：{{new Date(birthday).getFullYear()}}-{{new 
Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            birthday:1429032123201
       }
   });
</script>
</body>
</html>

　　虽然能得到结果，但是非常麻烦。

　　Vue中提供了计算属性，来替代复杂的表达式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <h2>
       你的生日为：{{new Date(birthday).getFullYear()}}-{{new 
Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
    <hr>
    <h2>
       computed计算方式；你的生日为：{{birth}}
    </h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            birthday:1429032123201
       },
        computed:{
            birth(){
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + 
date.getDay();
           }
       }
   });
</script>
</body>
</html>

　　计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。 

　　　

 

 

　　

 

九、watch

　1、监控

　　watch可以让我们监控一个值的变化。从而做出相应的反应。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <input v-model="message">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            message:"hello vue"
       },
        watch:{
            message(newValue, oldValue){
                console.log("新值：" + newValue + "；旧值：" + oldValue);
           }
       }
   });
</script>
</body>
</html>

　　　

 

 

　2、深度监控

　　如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化，例如： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <input v-model="message"/>
    <hr><br>
    <input v-model="person.name"><br>
    <input v-model="person.age"> <button @click="person.age++">+</button>
    <h2>
       姓名为：{{person.name}}；年龄为：{{person.age}}
    </h2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            message:"hello vue",
            person:{"name":"itcast", "age":12}
       },
        watch:{
            message(newValue, oldValue){
                console.log("新值：" + newValue + "；旧值：" + oldValue);
           },
            person: {
                //开启深度监控，可以监控到对象属性值的变化
                deep: true,
                //监控的处理方法
                handler(obj){
                    console.log("name = " + obj.name + ", age=" + obj.age);
               }
           }
       }
   });
</script>
</body>
</html>

　　变化：

    • 以前定义监控时，person是一个函数，现在改成了对象，并且要指定两个属性：
      • deep:代表深度监控，不仅监控person变化，也监控person中属性变化
      • handler：就是以前的监控处理函数 

　　　

 

标签：el,Vue,name,--,age,Vue30,指令,app
From： https://www.cnblogs.com/ajing2018/p/18259234

相关文章

  • 第二十四节:带你梳理Vue2 : Vue具名插槽/作用域插槽/v-slot指令
    1.具名插槽1.1没有使用具名插槽的问题有的时候我们在使用子组件时,在子组件模板上不同的位置插入不同的内容,只有一个插槽显然没法满足我们的需求,看示例:需求如下:子组件是一篇文章的结构父组件在调用子组件是给文章插入标题,正文,时间信息示例代码如下:<divid=......
  • Vue30_实例2
    目标：了解Vue实例生命周期，生命周期的钩子函数及created函数常用场景分析：在创建vue实例的时候可以制定模板id、数据和方法；而如果要在实例化、模板渲染的过程中需要执行一些其它操作的话，那么可以使用钩子函数。一、创建Vue实例每个Vue应用都是通过用Vue函数创建一个新的Vue......
  • 计算机组成原理--第四章指令系统
    目前正在备考25考研，现将25计算机408学习整理的知识点进行汇总整理。一、指令系统1.1指令的定义指令就是计算机要执行某种操作的命令。一台计算机中所有机器指令的集合就是这台计算机的指令系统也称指令集。指令系统的引入是为了避免用户与二进制代码直接触。一般来说PC......
  • S7指令中的PUT/GET或者BSEND/BRCV的选择
    1.背景最近用一个300PLC和1200PLC做S7通信的时候，因为交互的数据量有1024个bytes.这才意识到putget在数据量上的限制。以及大数据传输用到的BSEND/BRCV。2.S7支持的指令在PLC里，能基于S7协议用于数据交换的指令如下（S7300/400下描述）：其中值得注意的有几点：put/get无需通......
  • CPU指令集——bayer抽取r、g、b三通道（含镜像）
    需求1：在高帧率场景下，一般拿到的是bayer格式数据。图像处理时，一般会先插值成rgb，再拆分为单通道。如果可以直接bayer中抽出r、g、b，那效率将大大提升。需求2：抽取的单通道直接是镜像的注意：抽取后r、g、b尺寸是原来的一半，没有做插值（插值只会让数据量变大，并没有引入有效信息）效果：CPU指......
  • ARMv7 寄存器 工作模式 和指令集 和 堆栈回溯
    因此，在图4-1中，如果处理器是在IRQ模式，我们可以看见R0,R1...R12(与在用户模式看到的相同的寄存器)，加上SP_IRQ和LR_IRQ(仅在IRQ模式中可以访问的寄存器)和R15(程序计数器，PC)。我们通常不必指定模式中的寄存器名。如果我们在一行代码中引用R13，处理器会访问当前模式对应的SP寄存器。......
  • CPU指令集——bayer抽取r、g、b三通道
    需求：在高帧率场景下，一般拿到的是bayer格式数据。图像处理时，一般会先插值成rgb，再拆分为单通道。如果可以直接bayer中抽出r、g、b，那效率将大大提升。注意：抽取后r、g、b尺寸是原来的一半，没有做插值（插值只会让数据量变大，并没有引入有效信息）效果：CPU指令集优化后，速度是传统算法的8倍左......
  • linux常用指令（不断更新中）
    1.ls展示路径下所有文件以及子目录2.cd进入对应目录。使用时可以输入前几个字符，点击TAB键，无需手动输入后续字符。3.vim打开文本文件进行编辑。输入i进入可编辑模式。按下esc退出当前模式。输入:wq保存并退出输入:q直接退出4.rz-be上传文件（压缩包）sz下载文件5.......
  • CPU指令集——VS打断点时注意事项
    在看内存中数据时，VS2015打断点碰到了数据读入不正确的问题uint8_tuint8_array[32]={00,07,04,04,02,03,06,02,02,05,04,02,06,05,04,03,00,07,04,05,00,02,00,03,04,05,02,02,04,03,04,06};__m256iresult=_mm256_loadu_si256((__m256i*......
  • 第一章 进制，寄存器，汇编指令（公开课）
     一、进制1、十进制：由0.1.2.3.4.5.6.7.8.9组成，逢十进一2、二进制：由0.1组成，逢二进一eg:0--01--12--103--114--1005--1016--1103、十六进制：由0.1.2.3.4.5.6.7.8.9.A.B.C.D.E.F组成，逢十六进一4、八进制eg:2-3=？二、exe程序1、PE文件结构：任何一个在Windows上运行的可执行文件都要遵......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99