记 10 学习 Vue 的语法和结构

vue是渐进式前端框架，相比于传统的js、jquery它有以下优势

vue通过内置代码处理，简化了DOM操作，以达成响应式数据渲染。即我们对数据进行操作，vue自动将数据更新到视图中去

基础内容

js 部分

1. 首先在 js文件（script）中新建vue实例

const vm = new Vue({
   
})

2. 设定项目内的生效元素，确定当前实例的数据响应及所有语法功能的生效范围

const vm = new Vue({
    el: '#app',
})

其中 el 是 vue实例中的配置属性，生效元素是 id 为 app 的容器（如果是 class 就是 .app）

3. 声明响应式数据（ data ）

    data () {
        return {
            message: `Hello Vue!`,
            list: [1,2,3,4,5,6,7,8,9,10],
            obj: {
                name: '张三',
                age: 18
            }
        }
    }

4. 封装逻辑代码（ methods ）

html部分
    <div id="app">
        <p>{{handle()}}</p>
    </div>

js部分
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    title: 'hello',
                    message: 'vue'
                }
            },
            methods: {
                handle() {         
                    return ('标题为' + this.title + '，内容为' + this.message)
                }
            }
        })
    </script>

5. 计算属性（ computed ）

计算属性具有缓存性，当响应式数据发生改变时才会去进行计算，计算后的结果缓存起来，数据不变时计算属性提取缓存的结果即可，优化性能。

html部分
    <div id="app">
        <p>计算{{Compute}}</p>
    </div>
JS部分
    computed: {
        Compute() {
            console.log('computed函数被调用了');
        }
    },

6. 监听属性（ watch ）

     watch: {
         title() {
             console.log('title发生了变化');
         }
     }

html部分

1. 使用插值表达式

<div id="app">{{ message.toUpperCase() }}</div>

它会将div#app中的{{ message }}替换为Hello Vue!，并将其后所附的表达式，作为JavaScript表达式执行：Hello Vue!会被转换为大写字母。

2. 指令

内容指令 v-text v-html

渲染指令 v-if v-show v-for

属性指令 v-bind(:)

事件指令 v-on:(@)

表单指令 v-model 视图（页面输入）与数据的双向数据绑定

3. 修饰符

在 Vue.js 中，修饰符（Modifiers）是特殊的后缀，可以被添加到指令后，用来改变指令的行为，通过修饰符，可以使代码更简洁和高效。以下是 Vue.js 中常用的修饰符：

• .lazy：用于 v-model 指令，使得输入只在失焦或 change 事件触发时才更新值。
• .number：用于 v-model 指令，确保绑定的值被转换成数值类型。
• .trim：用于 v-model 指令，自动过滤用户输入的首尾空白字符。
• .stop：阻止事件冒泡。
• .prevent：阻止事件的默认行为。
• .capture：添加事件侦听器时使用捕获模式。
• .self：仅当事件的触发元素是绑定事件的元素本身时才触发事件。
• .once：事件将只会被触发一次，之后会被移除。
• .passive：告诉浏览器你不想阻止事件的默认行为，常用于 touch 事件和滚动事件中提高页面滚动性能。

修饰符可以组合使用，比如

<button @click.stop.prevent="doSomething">Stop and Prevent</button>

将同时阻止事件冒泡和默认行为。