Vue进门

最新推荐文章于 2023-06-29 23:47:31 发布

The Zen of Python

最新推荐文章于 2023-06-29 23:47:31 发布

阅读量392

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/weixin_34104410/article/details/111713302

版权

前端技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文是Vue.js的入门教程，涵盖Hello World、方法与双向绑定、组件创建、Vue实例生命周期、模板语法、指令、计算属性与侦听器等内容。通过实例解析v-if、v-for、Class与Style绑定，带你逐步掌握Vue的基础和核心概念。

摘要由CSDN通过智能技术生成

Vue入门

Hello World

Hello World

开发环境
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
生产环境
https://cdn.jsdelivr.net/npm/vue

vue-cli是什么？基于Node.js的构建工具是什么？
Vue.js的核心
采用模板语法，通过声明，将数据渲染进DOM

<html>

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

<body>
   <div id="app">
       {{ message }}
   </div>

   <div id='app-2'>
       <span v-bind:title="message">
           鼠标放这儿
       </span>
   </div>

   <div id="app-3">
       <p v-if="seen">是否能看见我？</p>

   </div>

   <div id='app-4'>
       <ol>
           <li v-for="i in todos">
               {{ i.text}}
           </li>
       </ol>
   </div>
</body>
<script>
   var app = new Vue({
       el: '#app',
       data: {
           message: 'Hello Vue!'
       }
   })

   var app2 = new Vue({
       el: '#app-2',
       data: {
           message: '页面加载于' + new Date().toLocaleString()
       }
   })

   var app3 = new Vue({
       el: '#app-3',
       data: {
           seen: true
       }
   })

   var app4 = new Vue({
       el: '#app-4',
       data: {
           todos: [
               { text: 'JavaScript' },
               { text: 'Vue' },
               { text: 'Program' }
           ]
       }
   })

</script>

</html>

方法与双向绑定

<html>

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

<body>
    <div id="app-5">
        <p> {{ message}}</p>
        <button v-on:click="reverseMessage">翻转消息</button>
    </div>

    <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
</body>
<script>
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'hello'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: '你好'
        }
    })

</script>

</html>

vue官网¹

创建组件

<html>

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

<body>
    <div id="app-7">
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
            </todo-item>
        </ol>
    </div>
</body>
<script>
    Vue.component('todo-item', {
        props: ['todo'], //props类似于一个自定义attribute
        template: '<li>{{ todo.text }}</li>'
    })

    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '水果' }
            ]
        }
    })
</script>

</html>

Vue实例

当一个Vue实例被创建，其data对象中所有的属性会被加载，当属性值改变时，视图将会产生响应。
半道添加的属性不会触发响应
使用Object.freeze(obj), 阻止修改现有的属性
Vue的特殊属性使用 $点出来，如 v m .$ data, vm. $e l, v m .$ watch
使用生命周期钩子操纵Vue对象创建过程

设置数据监听
编译模板
将实例挂载到DOM
在数据变化时更新DOM
生命周期钩子
created: 在一个实例被创建之后执行
mounted
updated
destroyed

箭头函数是什么东西²

生命周期图示

点这里

模板语法

v-once指令可以使数据改变时， 页面的值不更新

<span v-once>这个将不会改变: {{ msg }}</span>

双大括号把html当普通文本
v-html指令可以输出真正的html

XSS攻击是什么？

~~双括号中不能使用JavaScript语句~~

双括号中可以使用JavaScript表达式
不应在模板表达式中访问用户自定义的全局变量，因为其在沙盒中

10¹⁰⁰ 10₁₀₀ 10¹⁰⁰ 10₁₀₀ 10¹⁰⁰ 10₁₀₀ 10¹⁰⁰ 10₁₀₀

指令

指令是带有v-前缀的特殊属性，
指令的职责是当表达式的值发生改变时，响应式地作用于DOM
指令可以接收参数，在指令名称之后用冒号表示
2.6之后可以用指令:[变量] 来指定动态参数
修饰符用一个点来指出指令应该以特殊的方式绑定
v-bind的缩写为省略不写
v-on的缩写为将v-on:写成@

Alt

计算属性与方法

计算属性

<html>

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

<body>
    <div id="example">
        <p>Original: {{ message }}</p>
        <p>Computed: {{ reverseMessage }}</p>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#example',
        data: {
            message: 'hello',
        },
        computed: {
            reverseMessage: function () {
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

</html>

方法

<html>

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

<body>
    <div id="example">
        <p>Original: {{ message }}</p>
        <p>Computed: {{ reverseMessage() }}</p>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#example',
        data: {
            message: '123',
        },
        methods: {
            reverseMessage: function () {
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

</html>

计算属性只有当响应式依赖发生变化时才会重新求值
- 方法是每次都会重新求值
  - 也就是说计算属性会优先使用缓存而方法不使用

AngularJS是什么？

计算属性默认只有getter
可以给计算属性设置一个setter

<html>

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

<body>
    <div id="demo">
        <p> {{ fullName }} </p>
        <input v-model="fullName">
    </div>

    <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>


</body>
<script>
    var app = new Vue({
        el: '#demo',
        data: {
            firstName: 'Vue',
            lastName: 'Js'
        },
        computed: {
            fullName: {
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }
        }
    })

    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: '你好'
        }
    })
</script>

</html>

为什么两种效果不一样？

侦听器

一个简单的表格是这么创建的：

属性	解释
侦听器	使用watch在数据变化时执行异步或开销较大的操作

<html>

<head>
    <title>test vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>

<body>
    <div id="watch-example">
        <p>
            Ask a question:
            <input v-model="question">
        </p>
        <p>{{ answer }}</p>
    </div>


</body>

<script>
    // 根据question状态的变化在answer部分打印不同的语句
    // 1. 初始化说明
    // 2. 监测：当question变化时，显示正在输入中
    // 3. 限制，当输入完成以后，调用获取answer的接口
    // 4. question中找不到问号则提示
    // 5. question中有问号则调用一次接口，并赋值answer
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',
            answer: 'I cannot give you an answer until you ask a question!'
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question: function (newQuestion, oldQuestion) {
                this.answer = 'Waiting for you to stop typing...'
                this.debouncedGetAnswer()
            }
        },
        created: function () {
            // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
            // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
            // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
            // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
            // 请参考：https://lodash.com/docs#debounce
            this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
        },
        methods: {
            getAnswer: function () {
                if (this.question.indexOf('?') === -1) {
                    this.answer = 'Questions usually contain a question mark. ;-)'
                    return
                }
                this.answer = 'Thinking...'
                var vm = this
                axios.get('https://yesno.wtf/api')
                    .then(function (response) {
                        //{"answer":"yes","forced":false,"image":"https://yesno.wtf/assets/yes/2-5df1b403f2654fa77559af1bf2332d7a.gif"}
                        //   vm.answer = _.capitalize(response.data.answer)
                        vm.answer = _.capitalize(response.data.answer + ',' + response.data.image)
                    })
                    .catch(function (error) {
                        vm.answer = 'Error! Could not reach the API. ' + error
                    })
            }
        }
    })
</script>

</html>

bok

ok bok?

bok

Class 与 Style 绑定

对象语法

传给v-bind:class 一个对象，以动态地切换 class

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

<script>
data: {
  isActive: true,
  hasError: false
}</script>

<!--会被渲染成这样！！！！！-->
<div class="static active"></div>

`内联定义是什么？`

可能就是那种等于号的定义
在这里插入图片描述

绑定的数据对象不必内联定义在模板里，即可以不定义

<div v-bind:class="classObject"></div>
<script>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
</script>

详情链接

绑定一个返回对象的计算属性

就是某个属性怎么样是计算得来的

<div v-bind:class="classObject"></div>
<script>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
</script>

数组语法

在这里插入图片描述

当在自定义组件上添加class属性时，这个属性会被添加到该组件的根元素上，且已经存在的class不会被覆盖

v-bind:style

就是给标签赋予某种样式

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<script>
data: {
  activeColor: 'red',
  fontSize: 30
}
</script>

<!--或者-->

<div v-bind:style="styleObject"></div>
<script>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
</script>

<!--数组语法将多个样式应用到同一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

有点理解不了了，像看：
$\Gamma \mathbb O \in \forall \Gamma \mathbb O \in \forall \Gamma \mathbb O \in \forall \Gamma \mathbb O \in \forall \Gamma \mathbb O \in \forall$