vue基本语法与常用指令

前端三驾马车

1.react.js
2.agular.js
3.vue.js
vue.js ：vue官网

vue

引入vue

1.直接通过script 标签引入

<script src="https://unpkg.com/vue@next"></script>

静态页面：页面数据固定

<h1>Hello World</h1>

通过模板字面量将页面模板化，页面内容可以根据不同的内容进行更改
用两个大括号包围起来将（双大括号）；

<!-- {{message}} : 插值, 数据占位符 -->
 <h1 class="title">{{message}}</h1>

创建完成之后，填入插值，将数据更新之后输出
es6 里面的textContent进行文本替换，将双大括号的内容更新成我们需要输出的内容

document.querySelector('.title').textContent = 'Hello 猪老师';

vue.js
通过Vue.createApp创建一个vue实例，然后调用data方法,对上方的定义的插值message进行传值
可以通过定义一个容器的来装之后，通过 mount方法将内容挂载到对应的页面元素上输出

const app = Vue.createApp({
        data() {
          return {
            message: 'Hello 大家吃了吗',
          };
        },
      });
 app.mount(document.querySelector('.title'));

vue常用术语

挂载点

挂载点: vue实例的作用域（当前vue可以影响的区域）
不能挂载到body里面，可以选择body里面的元素进行挂载
比如下面的div 里面通过双大括号创建了一个模板字面量

<div class="app">
      <p>用户名: {{username}}</p>
    </div>

然后通过vue实例并挂载
注释：首先创建一个常量app 调用Vue中的createApp属性，里面有一个data方法，直接在data方法中返回上方username的值保存到常量中，调用mount方法将他挂载到上方的div上渲染到页面中

const app = Vue.createApp({
        data() {
          return {
            username: '王老师',
          };
        },
      }).mount('.app');

数据注入

数据注入就是在通过data将和对象数据绑定之后，可以通过vue实例直接调用数据内容
获取上方的div中的数据

 console.log(app.$data.username);

可以用简化语法，直接调用,因为我们已经通过vue将会数据绑定到了app对象上

console.log(app.username);

响应式：可以通过vue实例，进行实时更新

      app.username = '张老师';

Vue指令：就是html标签的自定义属性，通过vue来进行管理

vue的指令以 “ v-“ 为前缀
v-text 在标签中直接填入相应内容（只能填入文本）
v-html 可以将标签一起解析并输出（可以解析标签以及标签中添加的样式）
有很多指令，去官网看手册

<div class="app">
      <!-- v-text -> textContent -->
      <!-- <p>用户名: <span v-text="username"></span></p> -->
      <!-- v-html -> innerHTML  -->
      <p>用户名: <span v-html="username"></span></p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            username: '牛老师',
          };
        },
      }).mount('.app');
      app.username = '<i style="color:red">张老师</i>';
    </script>

vue中的样式绑定

先创建一个行内样式

<style>
      .active {
        color: red;
      }
      .bgc {
        background-color: yellow;
      }
    </style>

vue动态属性设置指令 v-bind:属性名

 <div class="app">
     //这里调用下方挂载到div上面的属性，直接通过v-bind添加到样式中
      <p v-bind:style="{color:textColor,backgroundColor: bgc}">php.cn</p>
      //这里演示的是将对应的属性在下方添加成对象，然后调用
      <p v-bind:style="[base, custom]">php.cn</p>
      <!-- 2. 类样式: class  -->
      <p v-bind:class="active">Hello 猫老师</p>
      <!-- classList  -->
      //在添加类样式时，可以通过true和false 来控制是否有效（同时这个值也可以添加到一个变量中）
      <p v-bind:class="{active: isActive}">Hello 猫老师</p>
      <p class="active bgc">Hello 王老师</p>
      <!-- v-bind:是高频指令, 可简化为冒号 -->
      <p :class="['active', 'bgc']">Hello 王老师</p>
      <p :class="[mycolor, mybgc]">Hello 王老师</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // style: 'color: blue',
            textColor: 'green',
            bgc: 'wheat',
            base: {
              border: '1px solid',
              background: 'lightgreen',
            },
            custom: {
              color: 'white',
              padding: '15px',
            },
            active: 'active',
            isActive: true,
            mycolor: 'active',
            mybgc: 'bgc',
          };
        },
      }).mount('.app');

双向绑定

用es6的方式实现双向绑定
注释：oninput（这个方法就是返回当前按的键）
代码意思是拿到当前元素的下一个兄弟节并添加文本，添加的文本就是当前输入的值

<p>
        <div>ES6:</div>
        <input type="text" oninput="this.nextElementSibling.textContent=this.value"><span></span>
    </p>

用vue的方式实现双向绑定
v-on: vue的事件指令
v-on: 高频指令, @表示
$event:当前事件对象，在vue中要在前面加一个$符号

<input type="text" @input="comment = $event.target.value" :value="comment" />
 <span>{{comment}}</span>
 //简化语法
 <input type="text" v-model="comment" :value="comment" />
        <span>{{comment}}</span>
        <script>
      const app = Vue.createApp({
        data() {
          return {
            comment: null,
          };
        },
      }).mount('.app');
    </script>

修饰符
延迟绑定，不会实时检测，减少页面负担

<p>
        <!-- 延迟绑定:修饰符 -->
        <input type="text" v-model.lazy="comment" :value="comment" />
        <span>{{comment}}</span>
  </p>