• vue学习001

    1.vue程序的基本构成

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>hello worldtitle>
    9.     <script src="https://unpkg.com/vue@next">script>
    10.     
    11. head>
    12.  
    13. <body>
    14.     <div id="root"> div>
    15. body>
    16.  
    17. <script>
    18.     Vue.createApp({
    19.         data() {
    20.             return {
    21.                 count: 0
    22.             }
    23.         },
    24.         methods: {
    25.             handleBtnClick() {
    26.                 this.count = 0;
    27.             }
    28.         },
    29.         mounted() {
    30.             setInterval(() => {
    31.                 ++this.count;
    32.             }, 1000/10);
    33.             console.log("run mounted...");
    34.         },
    35.         template: `
    36.             
      count is {{count}}  
    37.             
    38.             
    39.         `
    40.     }).mount('#root');
    41. script>
    42.  
    43. html>
    • 引入线上cdn的vue库；
    • Vue.createApp({}).mount('#root'); 引入一个组件挂载到id=root的html标签；
    • data() {} 初始化组件的变量count；
    • methods: {} 定义普通成员函数handleBtnClick；
    • mounted() {} 在页面完成加载后自动调用；
    • template: `` 定义组件的模板，动态翻译成html；

    2.挂载点 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>hello worldtitle>
    9.     <script src="https://unpkg.com/vue@next">script>
    10.     
    11. head>
    12.  
    13. <body>
    14.     <div id="root" class="root"> div>
    15. body>
    16.  
    17. <script>
    18.     Vue.createApp({
    19.         data() {
    20.             return {
    21.                 count: 0
    22.             }
    23.         },
    24.         methods: {
    25.             handleBtnClick() {
    26.                 this.count = 0;
    27.             }
    28.         },
    29.         mounted() {
    30.             setInterval(() => {
    31.                 ++this.count;
    32.             }, 1000/10);
    33.             console.log("run mounted...");
    34.         },
    35.         template: `
    36.             
      count is {{count}}  
    37.             
    38.             
    39.         `
    40.     // }).mount('#root');  //id选择器
    41.     // }).mount('.root');  //class选择器
    42.     }).mount('div');           //标签选择器
    43. script>
    44.  
    45. html>
    •  }).mount('#root');  id选择器
    • }).mount('.root');    class选择器
    • }).mount('div');       标签选择器

    3.vue指令

    3.1 内容绑定，事件绑定

    • v-text

    v-text的作用是根据变量填充标签的内容。

    示例代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>hello worldtitle>
    9.     <script src="https://unpkg.com/vue@next">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app"> div>
    14. body>
    15.  
    16. <script>
    17.     Vue.createApp({
    18.         data() {
    19.             return {
    20.                 count: 0
    21.             }
    22.         },
    23.         template: `
    24.             <h3 v-text="'count is ' + count">h3>
    25.             <h3 v-text="'count is ' + this.count">h3>
    26.             <h3>count is {{count}} h3>
    27.             <h3>count is {{this.count}} h3>
    28.         `
    29.     }).mount('#app');
    30. script>
    31.  
    32. html>

    运行结果： 

    • v-html

    v-html与v-text类似，作用是根据变量填充标签的html内容。

    示例代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>hello worldtitle>
    9.     <script src="https://unpkg.com/vue@next">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app"> div>
    14. body>
    15.  
    16. <script>
    17.     Vue.createApp({
    18.         data() {
    19.             return {
    20.                 content: '<b>hello world!b>'
    21.             }
    22.         },
    23.         template: `
    24.             <p v-html="'content is ' + content">p>
    25.             <p v-html="'content is ' + this.content">p>
    26.             <p>content is {{content}} p>
    27.             <p>content is {{this.content}} p>
    28.         `
    29.     }).mount('#app');
    30. script>
    31.  
    32. html>

    运行结果：

     

    • v-on基础

    v-on的作用是为元素绑定事件。

    示例代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>hello worldtitle>
    9.     <script src="https://unpkg.com/vue@next">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app"> div>
    14. body>
    15.  
    16. <script>
    17.     Vue.createApp({
    18.         data() {
    19.             return {
    20.                 content1: '',
    21.                 content2: '',
    22.                 content3: '',
    23.             }
    24.         },
    25.         methods: {
    26.             handleBtnClick() {
    27.                 this.content1 = 'handleBtnClick';
    28.             },
    29.             handleBtnDoubleClick() {
    30.                 this.content2 = 'handleBtnDoubleClick';
    31.             },
    32.             handleBtnMouseEnter() {
    33.                 this.content3 = 'handleBtnMouseEnter';
    34.             },
    35.         },
    36.         template: `
    37.             <p> {{content1}} p>
    38.             <p> {{content2}} p>
    39.             <p> {{content3}} p>
    40.             <input type="button" value="鼠标单击事件" v-on:click="handleBtnClick"/>
    41.             <input type="button" value="鼠标双击事件" v-on:dblclick="handleBtnDoubleClick"/>
    42.             <input type="button" value="鼠标进入事件" v-on:mouseenter="handleBtnMouseEnter"/>
    43.         `
    44.     }).mount('#app');
    45. script>
    46.  
    47. html>

    v-on:也可简写成@

    1. <input type="button" value="鼠标单击事件" @click="handleBtnClick"/>
    2. <input type="button" value="鼠标双击事件" @dblclick="handleBtnDoubleClick"/>
    3. <input type="button" value="鼠标进入事件" @mouseenter="handleBtnMouseEnter"/>

    成员函数定义 也可写成

    1. handleBtnClick: function() {
    2.     this.content1 = 'handleBtnClick';
    3. },
    4. handleBtnDoubleClick: function() {
    5.     this.content2 = 'handleBtnDoubleClick';
    6. },
    7. handleBtnMouseEnter: function() {
    8.     this.content3 = 'handleBtnMouseEnter';
    9. },

    运行结果：

    3.2 显示切换，属性绑定

    • v-show

    v-show的作用是根据表达式的真假，切换元素的显示和隐藏。

    示例代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>hello worldtitle>
    9.     <script src="https://unpkg.com/vue@next">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app"> div>
    14. body>
    15.  
    16. <script>
    17.     Vue.createApp({
    18.         data() {
    19.             return {
    20.                 isShow: false,
    21.                 btnText: '显示',
    22.             }
    23.         },
    24.         methods: {
    25.             handleBtnClick: function() {
    26.                 this.isShow = !this.isShow;
    27.                 this.btnText = !this.isShow ? '显示' : '隐藏';
    28.             },
    29.         },
    30.         template: `
    31.             
       hello world 
    32.             
    33.         `
    34.     }).mount('#app');
    35. script>
    36.  
    37. html>

    运行结果：

    • v-if

    v-if的作用是根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）。

    示例代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>hello worldtitle>
    9.     <script src="https://unpkg.com/vue@next">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app"> div>
    14. body>
    15.  
    16. <script>
    17.     Vue.createApp({
    18.         data() {
    19.             return {
    20.                 isShow: false,
    21.                 btnText: '显示',
    22.             }
    23.         },
    24.         methods: {
    25.             handleBtnClick: function() {
    26.                 this.isShow = !this.isShow;
    27.                 this.btnText = !this.isShow ? '显示' : '隐藏';
    28.             },
    29.         },
    30.         template: `
    31.             
       hello world 
    32.             
      test
    33.             
    34.             
    35.         `
    36.     }).mount('#app');
    37. script>
    38.  
    39. html>

    运行结果：

     

    • v-bind

    v-bind的作用是设置元素的属性。

    示例代码：

    1. DOCTYPE html>
    3.  
    5.     
    6.     
    7.     
    8.     hello world
    9.     
    10.     
    12.  
    14.     
       
    16.  
    18.
    • 上述“”也可以简写成“”；
    • 上述“:class="isActive ? 'active' : ''"”也可写成“:class="{active : isActive}"” 。

    运行结果：

     

    3.3 列表循环，表单元素绑定 

    • v-for

    v-for的作用是根据数据生成列表结构。

    示例代码：​​​​​​​

    1. DOCTYPE html>
    3.  
    5.     
    6.     
    7.     
    8.     hello world
    9.     
    10.     
    12.  
    14.     
    16.  
    18.

    运行结果：

     

    • v-on补充​​​​​​​​​​​​​​

    v-on还可以用于绑定带有参数的事件函数。

    示例代码：​​​​​​​

    1. DOCTYPE html>
    3.  
    5.     
    6.     
    7.     
    8.     hello world
    9.     
    10.     
    12.  
    14.     
    16.  
    18.

    运行结果：​​​​​​​​​​​​​​

     

    • v-model

    v-model的作用是获取和设置表单元素的值（双向数据绑定）。

    示例代码：​​​​​​​

    1. DOCTYPE html>
    3.  
    5.     
    6.     
    7.     
    8.     hello world
    9.     
    10.     
    12.  
    14.     
    16.  
    18.

    运行结果：​​​​​​​​​​​​​​

    ​​​​​​​ 

  • 相关阅读:
    git中如何获取远程仓库的最新代码？
    Python命令行可以用下划线_代表上一次计算的结果
    力扣26 - 删除有序数组中的重复项【快慢指针】
    git revert 撤销之前的提交
    git如何把test分支做好的功能 文件和文件夹复制到master
    python使用SMTP发送邮件
    【FPGA教程案例55】深度学习案例2——基于FPGA的CNN卷积神经网络之ReLu激活层verilog实现
    MySQL InnoDB 是怎么使用 B+ 树存数据的？
    vue全局设置传值到后台不能为null
    python开发之个微机器人的二次开发
  • 原文地址：https://blog.csdn.net/qq_21950929/article/details/127771563