Vue基础

基本使用

1. 导包，导开发环境的包

2. html布局(以前怎么写现在还怎么写)

3. Vue的实例化

<!-- 2.布局 -->
    <div id="app">
        {{ message }}
    </div>
    <!-- 1.引包 -->
    <script src="JS/vue.js"></script>
    <!-- 3.实例化 -->
    <script>
        varapp = new Vue({
            el: "#app",
            data: {
                message: '雷霆嘎巴',
            }

        })
    </script>

v-mode指令

表单元素(input textarea select)双向绑定 

•  使用范围:表单元素 
•  用法:v-mode="变量" 
•  作用:实现表单元素的双向绑定 
•  双向绑定:input框的值与msg合二为一，msg就是input框的值 input框的值就是msg

  <div id="app">
          <input type="text" v-model="msg" />
          <!-- 取值：input框的值通过v-mode取到了msg的值 -->
          <p>你输入了: {{msg}}</p>
          <!-- 赋值：input框的值通过v-mode传递给了ms -->
  
      </div>
      
      <script src="./JS/vue.js"></script>
      
      <script>
          new Vue({
              el: "#app",
              data: {
                  msg: "dsd",
              },
          })
      </script>

v-html指令

v-html基本使用

• 用法 v-html="一句话表达式"

• 作用：类似于innerHTML,将它的值解析成html形式显示到它所在标签上，并替换该标签内容

• 用于富文本（带标签的字符串）解析

   <div id="app">
        <div v-text="msg"></div>
        <div v-html="msg"></div>
      </div>
      <script src="./vue.js"></script>
      <script>
        new Vue({
          el: "#app",
          data: {
            msg: "<h1>这是一个寂寞的天</h1>",
          },
        });
      </script>

v-text指令

• 指令实际就是标签上的属性
• 使用：v-text="值" 值实际就是js执行
• 一句话表达式：1：值 2：基本运算 3：三元表达式 boolean值？true的结果:false的结果

 <div id="app">      <div v-text="'今天天气怎么样'+msg"><span>123</span></div>      <div v-text="1+1"></div>      <div v-text="true?'男':'女'"></div>      <div v-text="obj.name"></div>      <div v-text="if(true){return 123}"></div>      </div>      <script src="./vue.js"></script>     <script>      new Vue({        el: "#app",        data: {          msg: "这是一个寂寞的天，下着伤心的雨",          obj: {            name: "zzz",          },        },      });    </script>

插值语法

• 用法： {{一句话表达式}}
• 使用地方：标签上的文本区域
• 作用：替换该标签的部分文本内容

<div id="app">
      <div v-text="msg">今天天气怎么样？</div>
      <div>今天天气怎么样？{{msg}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "这是一个寂寞的天",
        },
      });
    </script>