【Vue】二、 认识Vue.js的各种指令

news2024/11/24 1:29:22

后端程序员的vue学习之路

  • 1、创建第一个vue对象
  • 2、vue构造器
  • 3、Vue.js模板语法
    • v-text至v-for练习
    • v-on指令练习
    • v-bind指令练习
    • v-model指定练习
    • v-pre指令
    • v-slot指令
    • v-cloak指令
    • v-once指令

1、创建第一个vue对象

引入了vue.js后,在页面就可以创建一个Vue对象,每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
通过这些选项来创建你想要的行为,选项对象非常多,可以参考api文档:
https://cn.vuejs.org/v2/api/

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>test01</title>
  <!-- 开发环境(cdn版本),包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本,优化了尺寸和速度 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
  <!-- 生产环境版本,优化了尺寸和速度,指定了具体版本,避免不可预期的问题 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->
</head>

<body>

  <!-- html代码 -->
  <span>
    
    <div id="app1">
      <p>{{ message }}</p>
      <p>{{ message2 }}</p>
    </div>

    --------------------------------------------  <br/>

    <div id="app2">
      <p>{{ message }}</p>
      <p>{{ message2 }}</p>
    </div>

    --------------------------------------------  <br/>

    <p>{{ message }}</p>
    <p>{{ message2 }}</p>

    <div id="app3">
      <p>{{ message }}</p>
      <p>{{ message2 }}</p>
    </div>

  </span>

  <!-- vue.js的代码(脚本/数据) -->
  <script>

    //new一个vue实例对象,vm即ViewModel的缩写
    var vm = new Vue({
      el: '#app1',
      data: {
        message: 'Hello Vue.js!1',
        message2: 'Hello Vue.js!1'
      }
    })


    //new一个vue实例对象
    var vm2 = new Vue({
      el: '#app2',
      data: {
        message: 'Hello Vue.js!',
        message2: 'Hello Vue.js! 2',
      }
    })

    var vm3 = new Vue({
      el:'#app3',
      data: {
        message: 'Hello Vue.js!33',
        message2: 'Hello Vue.js! 3',
      }
    })


  </script>

</body>
</html>

2、vue构造器

1、el 选项,表示dom中的element,用el指定 DOM 元素中的 id;
2、data 选项,用于定义属性/数据;
页面展示数据采用模板语法:
1、{{ }} 用于输出对象属性或函数返回值;
2、整体上代码分为:视图 + 脚本(数据);
3、视图部分实际上是一种简洁的模板语法来声明式地将脚本里的数据渲染到DOM中;
4、通过浏览器控制台vue-devtools插件,更新控制台的数据,页面视图数据也会同步更新;
5、new Vue 创建了一个Vue应用的根对象,Vue根对象提供了一些有用的属性和方法供我们使用,这些属性和方法都有前缀 $,比如:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>test02</title>
  <!-- 开发环境(cdn版本),包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本,优化了尺寸和速度 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
  <!-- 生产环境版本,优化了尺寸和速度,指定了具体版本,避免不可预期的问题 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->
</head>

<body>

  <div id="app">
    <p>{{ a }}</p>
    <p>{{b}}</p>
    <p>{{c}}</p>
  </div>

  <!-- vue.js的代码 -->
  <script>
     var data = {
       a: 1,
       b: 1,
       c: 3}
    
    //创建了一个vue的实例对象vm,那么这个vm实例对象就有一些属性和方法可以供我们使用
    var vm = new Vue({
        el: '#app',
        data: data
    })

    // Vue根对象提供了一些有用的属性和方法供我们使用,这些属性和方法都有前缀 $
    vm.$data === data // => true
    console.log(vm.$data === data) 
     
    vm.$el === document.getElementById('app') // => true
    console.log(vm.$el === document.getElementById('app'))

    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `vm.a` 改变后调用
        this.b = newValue - oldValue
        console.log( newValue - oldValue)
    })
  </script>
</body>

</html>

3、Vue.js模板语法

视图(模板语法,怎么展示数据) + 脚本(vue脚本代码)
视图部分实际上Vue.js 使用了基于 HTML 的模版语法,允许开发人员声明式地将 DOM 和底层 Vue 实例数据绑定在一起;
Vue.js给我们提供了14个指令用于页面的渲染:

  • (1){{ }}
  • (2)v-text
  • (3)v-html
  • (4)v-show
  • (5)v-if
  • (6)v-else-if
  • (7)v-else
  • (8)v-for
  • (9)v-on
  • (10)v-bind
  • (11)v-model
  • (12)v-slot
  • (13)v-pre
  • (14)v-cloak
  • (15)v-once

v-text至v-for练习

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>test04</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <p v-text="messagetext">
      <span>{{messagetext}}</span>
    </p>
    <p v-html="messagehtml">
      <span>{{messagehtml}}</span>
    </p>

    <h1 v-show="showok">可以看见showok!</h1>
    <h1 v-show="showfalse">看不见showfalse!</h1>


    <h1 v-if="awesometrue">Vue is awesome!</h1>

    <h1 v-if="awesomefalse">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
    <!-- 也可以用 v-else 添加一个“else 块”: -->
    -------------------------------------<br />

    <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-for----------------------------<br />
    <b>1、v-for</b><br />
    <div v-for="item in items">
      {{ item.text }} 网址 {{ item.url }}
    </div>

    <b>2、v-for</b><br />
    <ul>
      <template v-for="item in items">
        <li>{{ item.text }} -- {{ item.url }}</li>
      </template>
    </ul>

    <b>3、v-for object </b><br />
    <ul>
      <li v-for="value in object">
        {{ value.name }} <br />
        {{ value.slogan }} <br />
        {{ value.url }}
      </li>
    </ul>

    <b>4、v-for 嵌套</b><br />
    <ul>
      <li v-for="value in object">
        {{ value.name }} <br />
        {{ value.slogan }} <br />
        {{ value.url }} <br />
        <span v-for="city in value.campus">
          &nbsp;&nbsp;{{ city }} <br />
        </span>
      </li>
    </ul>


    <b>5、v-for 第二个的参数为 property 名称 (也就是键名)</b><br />
    <ul>
      <div v-for="(value, name) in object0">
        {{ name }}: {{ value }}
      </div>
    </ul>
    <b>5、迭代对象</b><br />
    <!-- v-for迭代对象,v-for可以通过一个对象的属性来迭代数据 -->
    <ul>
      <li v-for="(value, pro) in object1">
        {{ pro }} : {{ value }}
      </li>
    </ul>

    <b>6、v-for 第三个参数index作为索引:</b><br />
    <ul>
      <div v-for="(value, name, index) in object">
        {{ index }}. {{ name }}: {{ value }}
      </div>
    </ul>

    <b>7、v-for </b><br />
    <ul>
      <li v-for="(value, idx, key) in object">
        {{idx}}. {{ key }} {{ value.name }} <br />
        {{idx}}. {{ key }} {{ value.url }} <br />
        {{idx}}. {{ key }} {{ value.slogan }} <br />
        <span v-for="(city, index, key) in value.campus">
          &nbsp;&nbsp;{{ key }}. {{ index }} {{ city }} <br />
        </span>
      </li>
    </ul>

    <b>8、对象可以直接取,不用迭代:只那能取到第一个</b><br/>
    {{ object1.name }} -- {{ object1.slogan }} -- {{ object1.url }}
    <br/>
    <b>10、循环数值</b><br/>
    <li v-for="(n ) in 10">
      {{n }}<br />
    </li>
    <br/>


  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        messagetext: "<h1>这个是messagetext</h1>",
        messagehtml: "<h1>这个是messagehtml</h1>",
        showok: true,
        showfalse: false,
        awesometrue: true,
        awesomefalse: false,
        type: 'C',
        items: [
          { text: '阿里', url: 'http://www.alibaba.com' },
          { text: '抖音', url: 'http://www.douyin.com' },
          { text: '快手', url: 'http://www.kuaishou.com' }
        ],
        object0: {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
        },
        object1: {
          name: '张三',
          slogan: '张三无底',
          url: 'http://www.baidu.com',
          campus: [
            '北京', '上海', '深圳', '广州'
          ]
        },
        object: [
          {
            name: '阿里', slogan: 14, url: 'http://www.alibaba.com', campus: [
              '北京1', '上海1', '深圳1', '广州1'
            ]
          },
          {
            text: '抖音', slogan: 11, url: 'http://www.douyin.com', campus: [
              '北京2', '上海2', '深圳2', '广州2'
            ]
          },
          {
            text: '快手', slogan: 12, url: 'http://www.kuaishou.com', campus: [
              '北京88', '上海88', '深圳88', '广州88'
            ]
          }
        ],
      }
    })
  </script>
</body>

</html>

v-on指令练习

监听DOM事件,并在触发时运行JavaScript代码,可以缩写为:@;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test08</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

<div id="app">

    <p>
        <a href="javascript:void(0)" v-on:click="sayHello">点击我</a> {{message}}
    </p>

    <p>
        <a href="javascript:" @click="sayHello">点击我</a>  {{message}}
    </p>

    <p>
      <a href="javascript:" @click="sayHello2('zhangsan')">点击我</a>
  </p>

    <p>
        <a href="javascript:" @click.once="sayHello2('zhangsan')">点击我</a>
    </p>

    <p>
        <input v-on:keyup.enter="onEnter">
    </p>

   <p>
        <!-- 键修饰符,键代码 -->
         <input @keyup.13="onEnter">
    </p> 

    <p>
      <a href="javascript:" @click.once="nihao('xiaoming')">点击我</a> {{nihaoms}}
  </p>
      <p>
    <a href="javascript:" v-on:click.once="nihao('xiaoming')">点击我</a> {{nihaoms}}
   </p>
</div>

<script>
    var vm = new Vue({
      el: '#app',
      //数据
      data: {
        message: "嗨,点击事件",
        nihaoms: "嗨,你好某人"
      },
      //函数方法
      methods: {
        nihao(name){
          this.nihaoms = 'hello, ' + name
        },
        sayHello: function () {
          this.message = this.message.split('').reverse().join('')
        },
        sayHello2: function (name) {
          alert(111)
          this.message = 'hello, ' + name
        },
        onEnter: function() {
            this.message = "按下Enter键了.111"
        }
      }
    })
</script>
</body>
</html>

v-bind指令练习

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>test09</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

  <div id="app">

    <div class="classyellowStyle">
      1class 指令,显示黄色的字体
    </div>
    
    <div v-bind:style="classStyle">
      2、v-bind:class 指令,显示红色的字体
    </div>
    <div v-bind:style="classyellowStyle">
      2、v-bind:class 显示黄色的字体
    </div>

    <div :class="'classStyle'">
      3:class 指令  显示红色的字体
    </div>

    <div v-bind:style="style1">
      4、v-bind:style 指令
    </div>

    <div :style="style1">
      :style 指令
    </div>

    <p> 图片引用
        <img v-bind:src="imageSrc">
    </p>
   
    <div  v-bind:title="title">
      v-bind:title悬浮提示的指令</div>
      <br/>
    <a :title="title">:title悬浮提示的指令
    </a>
   
    <div v-bind:id="'java-' + id">测试v-bind</div>
    <div :id="'list-' + id">测试v-bind忽略v-bind字符</div>

    <p>
        <a v-bind:href="url">百度官网链接</a><br />
        <a :href="url">百度官网链接v-bind字符</a>
    </p>

    <!-- 测试绑定字段值 -->
    <input id="" name="" value="测试v-bind">
    <input id="" name="" v-bind:value="message">
    
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        style1: "color:green;",
        title: "这是链接的提示文字",
        message: '百度',
        classStyle : 'color: red;',
        classyellowStyle : 'color: yellow;',
        id: 10,
        url: "http://www.baidu.com",
        imageSrc : "http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
      }
    })
  </script>

  <style>
    .classStyle {
      color: red;
    }
    .classyellowStyle {
      color: yellow;
    }
  </style>

</body>

</html>

v-model指定练习

Vue.js 是一个典型的 MVVM(Model-View-ViewModel)模型框架,MVVM 由MVC演化而来,View的变动,会自动更新到ViewModel,ViewModel的变动,也会自动更新到View,这种机制叫做双向绑定;
这也是Vue.js相较于传统JavaScript DOM编程的优势,通过这种数据双向绑定,我们可以轻松实现视图与数据的解耦:
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>test10</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

  <div id="app">

    1<br />
    <input type="text" v-model="message" placeholder="请输入"> <span>{{ message }}</span>
    <input type="week" v-model="weeks" placeholder="请输入"> <span>{{ weeks }}</span>
    <br /><br />
    <br>
    <!-- 1、button 按钮 -->
    <input type="button" v-model="buttons" v-on:click="sayHello"> <span>{{ buttons }}</span>
    <br>
    <br>

    2、输入框<br />
    千米 : <input type="text" v-model="kilometers"> <span>{{ kilometers }}</span> <br />: <input type="text" v-model="meters"> <span>{{ meters }}</span>
    <input type="text" v-model="kilometers"> <span>{{ kilometers+meters }}</span>
    <br /><br />

    3、大文本<br />
    <p>textarea元素:</p>
    <textarea v-model="content" placeholder="多行文本输入……"></textarea>
    <span>{{ content }}</span>
    <br><br>

    4、单选框<br />
    <input type="radio" id="天猫" value="tiammao" v-model="picked">
    <span>天猫</span>
    <input type="radio" id="淘宝" value="taobao" v-model="picked">
    <span>taobao</span>
    <br>
    <input type="radio" id="百度" value="baidu" v-model="picked">
    <span>baidu</span>
    <br>
    <span>选中值为: {{ picked }}</span>
    <br><br>

    5<br />
    <p>单个复选框:</p>
    <span>单个复选框</span>
    <input type="checkbox" id="checked" value="单个复选框" v-model="checked">
    <span>{{ checked }}</span>
    <br><br>

    6<br />
    <p>多个复选框:</p>
    <input type="checkbox" id="baidus" value="baidu" v-model="checkedNames">
    <span>baidu</span>

    <input type="checkbox" id="weibos" value="weibo" v-model="checkedNames">
    <span>weibo</span>

    <input type="checkbox" id="taobaos" value="Taobao" v-model="checkedNames">
    <span>taobao</span>

    <br><br>
    <span> 选择的值为: {{ checkedNames }} </span>
    <br><br>

    7、下拉框<br />
    <select v-model="selected" name="fruit">
      <option value="">请选择</option>
      <option value="www.taobao.com">taobao</option>
      <option value="www.baidu.com">baidu</option>
    </select>
    <div>
      选择的网站是: {{selected}}
    </div>

    8、下拉框展示名字选择<br />
    <select v-model="selected2" name="fruits">
      <option value="">请选择</option>
      <option v-for="(item, index) in items" :key="index" :value="item.url">
        {{ item.text }}
      </option>
    </select>
    <div>
      选择的网站是: {{selected2}}
    </div>


  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        items: [
          { text: '阿里', url: 'http://www.alibaba.com' },
          { text: '抖音', url: 'http://www.douyin.com' },
          { text: '快手', url: 'http://www.kuaishou.com' }
        ],
        selected2: '',
        message: '练习v-model指定指令',
        kilometers: 0,
        meters: 0,
        name: "练习v-model指令名字",
        content: '坚持不懈,持之以恒',
        picked: 'taobao',
        checked: [],
        checkedNames: [],
        selected: '',
        buttons: '点我一下s',
        weeks: '2022-W52'
      },
      methods: {
        sayHello() {
          this.buttons = '再点我一下'
        }
      }
    })
  </script>
</body>

</html>

v-pre指令

1、跳过其所在节点的编译过程。

2、可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test11</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        1----------<br />
        <p>{{ msg }}</p>
        2----------<br />
     
        <p v-pre>{{ msg }}</p>
        3----------<br />
        <p>
            <input type="text" v-model="msg" name="">
        </p>

    </div>

    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data: {
                msg: "hello"
            }
        });
    </script>
</body>

</html>

v-slot指令

插槽,结合组件使用;

v-cloak指令

v-cloak在使用 {{ }} 展示或更新页面数据时,当网速比较慢时,会出现一个体验不好的过渡现象,会让用户先看到 {{ }} 表达式,即页面中的{{ msg }},然后才看到data中的值,即所谓的闪烁问题;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">

        <p v-cloak>{{ msg }}</p>

        <p v-text="msg"></p>

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '欢迎使用Vue!'
            }
        })
    </script>
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</body>

</html>

v-once指令

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test13</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-once>{{ msg }}</p>
        
        <p>{{msg}}</p>
        <input type="text" v-model="msg" placeholder="请输入"> <span>{{ msg }}</span>
    </div>

    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data: {
                msg: "hello"
            }
        });
    </script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/108646.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JS圣诞树

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。&#x1f34e;个人主页&#xff1a;Java Fans的博客&#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。&#x1f49e;当前专栏&#xff1a;前端案例分享…

this指向问题,apply,call,bind用法及区别

1.谁调用我&#xff0c;我就指向谁。 在页面上直接打印一个consle.log&#xff08;this&#xff09;,这个this会指向window对象。如果写一个函数&#xff1a;打印this,该this会指向window。因为这个函数是挂载在这个window对象上的。对象obj的this指向的是对象&#xff0c;因为…

[ 漏洞挖掘基础篇五 ] 漏洞挖掘之 XSS 注入挖掘

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

创新指南|2023年企业战略制定应避免的5大误区

在迅速发展、不断变化的当下&#xff0c;尤其是疫情黑天鹅发生之后&#xff0c;许多企业面临着高度的不确定性&#xff0c;从而亟需进行企业战略的思考。在本文中&#xff0c;战略专家Stephen Bungay指出了五个战略误区&#xff0c;并解释了它们为什么听起来正确&#xff0c;以…

基于JAVA技术的《物联网技术》课程学习网站设计与实现

开发工具(eclipse/idea/vscode等)&#xff1a; 数据库(sqlite/mysql/sqlserver等)&#xff1a; 功能模块(请用文字描述&#xff0c;至少200字)&#xff1a; 基于JAVA技术的《物联网技术》课程学习网站设计与实现 网站前台&#xff1a;关于我们、联系我们、公告信息、资料信息&a…

实现Kafka至少消费一次

实现Kafka至少消费一次默认的kafka消费者存在什么问题&#xff1f;实现至少消费一次加入重试队列再次消费使用seek方法再次消费在实际重要的场景中&#xff0c;常常需要实现消费者至少消费一次。因为使用默认的kafka消费者存在某些问题。 默认的kafka消费者存在什么问题&#x…

Django+DRF+Vue+Mysql+Redis OUC软件工程作业

交作业啦 前端&#xff1a;htmlcssjsVueElement-ui 后端&#xff1a;DjangoDRFceleryhaystackdjango_crontab 数据库&#xff1a;MysqlRedis 一些技术和功能&#xff1a; 为session、短信验证码、用户浏览记录、购物车、异步任务队列 创建缓存whoosh搜索引擎异步任务队列 用…

谷歌Recorder实现说话人自动标注,功能性与iOS语音备忘录再度拉大

在今年的 Made By Google 大会上&#xff0c;谷歌公布了 Recorder 应用的自动说话人标注功能。该功能将实时地为语音识别的文本加上匿名的说话人标签&#xff08;例如 “说话人 1” 或“说话人 2”&#xff09;。这项功能将极大地提升录音文本的可读性与实用性。 谷歌于 2019 …

Spring Cloud Alibaba Sentinel - - >流控规则初体验

源码地址&#xff1a;https://github.com/alibaba/Sentinel 新手指南&#xff1a;https://github.com/alibaba/Sentinel/wiki/新手指南#公网-demo 官方文档&#xff1a;https://sentinelguard.io/zh-cn/docs/introduction.html 注解支持文档&#xff1a;https://github.com/ali…

Android常用布局总结之(FrameLayout、ConstraintLayout)

一、FrameLayout 帧布局 这种布局类似叠加的图片&#xff0c;没有任何的定位方式&#xff0c;当我们往里面添加组件的时候&#xff0c;会默认把他们放到容器的左上角。 上面的组件显示在底层&#xff0c;下面的组件显示在上层。 如下代码&#xff0c;视图1显示在最底层&#…

虹科案例 | 光纤传感器实现了新的核磁共振应用!

背景介绍 光纤传感器已成为推动MRI最新功能套件升级和新MRI设备设计背后的关键技术。将患者的某些活动与MRI成像系统同步是越来越受重视的需求。磁场强度随着每一代的发展而增大&#xff08;3.0T是当今最高的标准&#xff09;&#xff0c;因此&#xff0c;组件的电磁透明度在每…

python---数据库操作

在python中&#xff0c;使用第三方库pymysql来执行数据库操作 命令行窗口输入 &#xff1a;pip install pymysql&#xff0c;下载第三方库 数据库查询操作 Python查询Mysql使用 fetchone() 方法获取单条数据, 使用fetchall() 方法获取多条数据。 fetchone(): 该方法获取下一…

OpManager 网络管理软件

随着网络在有线、无线和虚拟 IT 环境中的扩展&#xff0c;网络管理只会变得越来越复杂&#xff0c;使网络管理员需要他们可以获得的所有帮助。市场上有无数的网络管理解决方案&#xff0c;因此将注意力集中在正确的解决方案上非常重要。网络管理工具通常可以帮助您将网络的各种…

一行python命令让手机读取电脑文件

本文讲解python的一个内置文件传输下载器&#xff0c;可以用来在局域网内进行文件传输&#xff0c;当然可能有人会问&#xff0c;我用微信QQ也能传&#xff0c;为什么还要用python来传输下载&#xff1f;在此&#xff0c;其实我个人感觉的是&#xff0c;这种操作更简单&#xf…

【Web开发】Python实现Web服务器(Ubuntu下打包Flask)

&#x1f37a;基于Python的Web服务器系列相关文章编写如下&#x1f37a;&#xff1a; &#x1f388;【Web开发】Python实现Web服务器&#xff08;Flask快速入门&#xff09;&#x1f388;&#x1f388;【Web开发】Python实现Web服务器&#xff08;Flask案例测试&#xff09;&a…

安科瑞红外测温方案助力滁州某新能源光伏产业工厂安全用电

安科瑞 李亚俊 壹捌柒贰壹零玖捌柒伍柒 摘要&#xff1a; 近年来&#xff0c;在国家政策引导与技术革新驱动的双重作用下&#xff0c;光伏产业保持快速增长态势&#xff0c;产业规模持续扩大&#xff0c;技术迭代更新不断&#xff0c;目前已在全球市场取得优势。据统计&#…

数据结构C语言版——链式二叉树的基本操作实现

文章目录链式二叉树1. 概念2. 链式二叉树的基本操作前序遍历中序遍历后续遍历根据前序遍历构建二叉树层序遍历在二叉树中查找指定值获取二叉树节点个数获取叶子节点个数求二叉树的高度链式二叉树 1. 概念 设计不同的节点结构可构成不同形式的链式存储结构。由二叉树的定义可知…

用简单伪随机数发生器实现随机中点位移分形(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 随机分形(random fractal)采用随机生成机制而得到的分形集.分形体不具有特征尺度(亦即大小尺度跨好几个量级)&#xff0c;却有…

5G无线技术基础自学系列 | 5G接入类KPI

素材来源&#xff1a;《5G无线网络规划与优化》 一边学习一边整理内容&#xff0c;并与大家分享&#xff0c;侵权即删&#xff0c;谢谢支持&#xff01; 附上汇总贴&#xff1a;5G无线技术基础自学系列 | 汇总_COCOgsta的博客-CSDN博客 接入类KPI反映了用户成功接入到网络中并…

李沐精读论文:Swin transformer: Hierarchical vision transformer using shifted windows

论文地址&#xff1a;Swin transformer: Hierarchical vision transformer using shifted windows 代码&#xff1a;官方源码 pytorch实现 SwinTransformerAPI 视频&#xff1a;Swin Transformer论文精读【论文精读】_哔哩哔哩_bilibili 本文注意参考&#xff1a;Swin Transfor…