Vue入门

1、Vue概念：

• Vue 是用于构建界面的javascript 库。
• Vue 是数据双向绑定的框架

• Vue 是以数据驱动为主javascript库。数据改变更新页面，页面改变更新数据

• Vue是一种MVVM模式

    // MVVM: 是一种软件设计模式
    // MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。
    // MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。 
    // 保持应用程序逻辑和UI之间的清晰分离有助于解决许多开发问题，并使应用程序更易于测试、维护和演变。

2、编写方式：

传统的：声明式编程（注重结果）

<div  id="app">
      <button  v-on:click="foo">点击按钮</button>
</div>

<script>
    new Vue({
         el:"#app",
         methods: {
                foo(){ console.log("触发了点击事件")}
         }
    })
</script>

vue的：命令式编程 (注重过程)

<div  id="app">
      <button  v-on:click="foo">点击按钮</button>
</div>
<script>
    let button  = document.querySelector("#app button");
   button.onclick = function(){
  		 console.log("触发了点击事件")
   }
</script>

3、vue数据响应式原理：

vue@2版本，采用defineProperty方法实现，监听数据的改变。

<div id="root">
    <input type="text" class="inp">
    <h3 class="title"></h3>
</div>

<script>
    // 获取标签
    const inp_element = document.querySelector("#root input")
    const title_element = document.querySelector("#root .title")
    // 数据
    let data = {
        text: ""
    }
    // 定义储存器变量 (意义就是储存数据)
    // let _text = "";
    // 观察data的text属性的改变
    Object.defineProperty(data,"text", {
        // 读
        get(){
            // console.log("读取text")
            return this._text;
        },
        // 写
        set(value){
            // console.log("写入text")
            this._text = value;
            // 更新页面
            title_element.innerText = inp_element.value;
        }
    })
    // 赋值表示写入 （带等于号）
    // data.text = "123";
    // 读取
    // console.log(data.text);
    // 数据双向绑定
    // 1： 数据改变更新页面
    // 2： 页面更新改变数据
    inp_element.oninput = () => {
        // 改变数据
        data.text = inp_element.value;
    }
</script>

4、vue编写步骤

• 引入vue.js
• 创建Vue实例
• 设置挂载点

5、模板语法 {{}}

<!-- 插值表达式 {{ js }} -->
<div id="app" v-cloak>
    <h2>{{123}}</h2>
    <!-- 报错 直接填写abc, 既不是字符串，也不是变量 -->
    <!-- <h2>{{abc}}</h2> -->
    <h2>{{'abc'}}</h2>
    <!-- 可以书写三元运算 -->
    <h2>{{typeof 'abc' === 'string' ? '字符串类型':'其他类型'}}</h2>
    <!-- 可以填写变量 -->
    <h2>{{title}}</h2>
  

</div>
<script src="./libs/vue@2.7.16/vue.js"></script>
<script>
    //禁止控制台输出日志信息
    Vue.config.productionTip = false;
    new Vue({
        //挂载容器
        el: "#app",
        // 添加属性
        data: {
            title: "标题2222"
        }
    })
</script>

6、指令 (一种操作页面标签的方式)

设置文本

v-text：文本 
v-html: 超链接（html标签 ）

设置属性

v-bind

设置数据双向绑定

v-model

条件渲染

v-show
v-if
区别：
1)：
v-if：根据表达式的真假值来条件性地渲染一个元素。如果表达式的值为真，则渲染该元素；如果为假，则不渲染该元素。这意味着每次条件变化时，Vue 都会销毁和重建条件块内的事件监听器和子组件。
v-show：无论表达式的真假值如何，都会渲染元素，并通过 CSS 的 display 属性来控制其可见性。如果表达式的值为真，则元素可见；如果为假，则元素隐藏。这意味着元素始终存在于 DOM 中，只是其可见性会发生变化。

2):
由于 v-if 在条件变化时会销毁和重建元素，因此当条件频繁变化时，它可能会导致性能问题。
而 v-show 只是简单地切换元素的可见性，不涉及 DOM 的销毁和重建，因此在这种情况下性能更好。

3):
对于 v-if，如果初始条件为假，则不会渲染元素。只有当条件变为真时，才会开始渲染。而 v-show 则始终渲染元素，并根据条件来设置其可见性。

4):
v-if 更适合用于条件性地渲染那些不经常改变的内容。例如，你可能希望根据用户的权限来显示或隐藏某些内容。
v-show 更适合用于频繁切换显示/隐藏状态的元素，如切换按钮、折叠面板等。

列表渲染

v-for

事件绑定

v-on:不带on的事件=
简写为：@不带on的事件=
组合
如：v-on:keydown.enter=