• Vue第一讲

    Vue实例

    const vm = new Vue ({});

    1.data数据

    data用于保存当前Vue实例中所需要用到的数据。

    data属性的值只有两种情况：对象、返回对象的函数：

    1. //第一种:
    2. const vm = new Vue({
    3.         data:{
    4.             // 数据
    5.         }
    6.     });
    7.  
    8. //第二种：
    9. const vm = new Vue({
    10.         data(){
    11.             return {
    12.                 // 数据
    13.             }
    14.         }
    15.     })

    注意：在后续学习完“组件”以后，组件中的data就只能使用“返回对象的函数”了。

    2.el

    el属性用于指定当前Vue实例的挂载目标，换句话说，el属性就是用来指定Vue实例的作用范围。

    el的属性值是一个字符串，用于设置挂在目标节点的选择器。

    注意：不要将body设置为挂载目标，因为Vue最终渲染成功后会将挂载目标元素给替换掉。

    3.模板语法（数据渲染）

    在挂载目标范围内，通过{{}}双大括号的语法，可以将Vue示例中的数据渲染到页面上。

    示例：

    1. <div id="app">
    2.         <div>
    3.             <h1>{{msg + student.name}}</h1>
    4.             <h3>{{flag ? 'hello' : 'world'}}</h3>
    5.         </div>
    6.  </div>

     

    1. <script src="js/vue.min.js"></script>
    2. <script>
    3.     const vm = new Vue({
    4.         el: '#app',
    5.         data() {
    6.             return {
    7.                 // 数据
    8.                 msg: 'hello world!',
    9.                 student: {
    10.                     name: 'ZhangLing',
    11.                     age: 20
    12.                 },
    13.                 flag: true
    14.             }
    15.         }
    16.     })
    17. </script>

    页面显示效果：

     

     4.事件处理

    事件监听

    Vue中提供了一个 v-on 指令，用来设置事件监听。

    <button v-on:click="handleClick">按钮</button>

    事件处理函数

    Vue中提供了一个 methods 属性，用来设置Vue中所有需要用到的方法。

    1.  const vm = new Vue({
    2.        methods:{
    3.             handleClick(){
    4.                 console.log('123');
    5.             }
    6.         }
    7.     });

    示例效果：

    当点击按钮时，执行函数：

     通过事件操作数据

    响应式

    当一个Vue实例被创建时，它将 data 对象中的所有属性（数据）加入到Vue的响应式系统中，当 data 中的数据值发生改变式，视图（页面）会自动去“响应”数据的变化，立即更新为最新的数据。

    示例：

    当点击按钮，文字会发生变化

    1. <div id="app">
    2.         <div>
    3.            <h4>{{msg}} {{student.name}}</h4>
    4.         </div>
    5.         <button v-on:click="handleClick">按钮</button>
    6. </div>
    1. const vm = new Vue({
    2.         el: '#app',
    3.         data() {
    4.             return {
    5.                 // 数据
    6.                 msg: 'hello world!',
    7.                 student: {
    8.                     name: 'ZhangLing',
    9.                     age: 20
    10.                 },
    11.               }
    12.         },
    13.         methods:{
    14.             handleClick(){
    15.                 this.student.name = 'Lili'
    16.             }
    17.         }
    18.  })

    点击前：

     

    点击后：

     

     案例：实现简易计数器

    代码：

    1. <!DOCTYPE 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>计数器</title>
    9.     <style>
    10.         #app{
    11.             text-align: center;
    12.         }
    13.     </style>
    14. </head>
    15.  
    16. <body>
    17.     <div id="app">
    18.         <h1>计数器：{{count}}</h1>
    19.         <button v-on:click="count--">-1</button>
    20.         <button v-on:click="increate">+1</button>
    21.     </div>
    22. </body>
    23. <script src="js/vue.min.js"></script>
    24. <script>
    25.     new Vue({
    26.         el: '#app',
    27.         data() {
    28.             return {
    29.                 count: 0,
    30.             }
    31.         },
    32.         methods: {
    33.             increate() {
    34.                 this.count++;
    35.             }
    36.         }
    37.     })
    38. </script>
    39.  
    40. </html>

    效果：

    计数器-CSDN直播icon-default.png?t=M5H6https://live.csdn.net/v/219698

  • 相关阅读:
    前端代码规范
    数据安全流通的未来趋势
    玩转AIGC：打造令人印象深刻的AI对话Prompt
    苹果电脑显示器校准推荐 BetterDisplay Pro for Mac
    mbedtls 自带SSL demo调试
    Charles如何抓取https请求-移动端+PC端，学完不要去做坏事哦
    界面组件Telerik加强对Fluent主题支持，让应用程序更国际化
    数字调制与星座图
    【每日一练】组队竞赛 && 删除公共字符（C++实现）
    【JavaScript 】DOM操作快速入门
  • 原文地址：https://blog.csdn.net/weixin_52993364/article/details/125485335