div添加样式 vue_vue.js

曾经终败给现在 2023-01-02 02:29 228阅读 0赞

![5c1a340d86cd39c7fae0bba1ca3c916a.png][]

**vue.js 中M V MV代表哪一部分**

<body>
      
      
      <div id="app">
        <p>{
         { msg }}</p>
      </div>
    
      <script>
        //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
        var vm = new Vue({
         
          el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
          // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
          data: {
          // data 属性中，存放的是 el 中要用到的数据
            msg: '欢迎学习Vue' 
          }
        })
      </script>
    </body>

**插值表达式（v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show ）**

<body>
      <div id="app">
        
        <p v-cloak>++++++++ {
         { msg }} ----------</p>
     
        
        
        <h4 v-text="msg">==================</h4>
        <div>{
         {msg2}}</div>
    
         
        <div v-html="msg2">1212112</div>
    
        
        
        
        
        
       
    
        
        
    
        
        
        
        <input type="text" style="width:100%;" v-model="msg">
    
        
        
    
        
        
    
        
        
        <h3 v-if="flag">这是用v-if控制的元素</h3>
        <h3 v-show="flag">这是用v-show控制的元素</h3>
      </div>
    
    
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '<h1>哈哈我骄傲</h1>',
            mytitle: '这是一个自己定义的title'
          },
          methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
            show: function () {
              alert('Hello')
            }
          }
        })
      </script>
    </body>

**v-for**

<body>
      <div id="app">
       
        <p v-for="(item, i) in list">索引值：{
         {i}} --- 每一项：{
         {item}}</p>
        <p v-for="(user, i) in list2">Id：{
         { user.id }} --- 名字：{
         { user.name }} --- 索引：{
         {i}}</p>
        
        <p v-for="(val, key, i) in user">值是： {
         { val }} --- 键是： {
         {key}} -- 索引： {
         {i}}</p> 
    
        
        
        <p v-for="count in 10">这是第 {
         { count }} 次循环</p> 
    
    </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
             list: [1, 2, 3, 4, 5, 6],
             list2: [
              { id: 1, name: 'zs1' },
              { id: 2, name: 'zs2' },
              { id: 3, name: 'zs3' },
              { id: 4, name: 'zs4' }
            ],
             user: {
              id: 1,
              name: '托尼·屎大颗',
              gender: '男'
            }
          },
          methods: {}
        });
      </script>
    </body>

**v-for循环中key属性的使用**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
      <div id="app">
    
        <div>
          <label>Id:
            <input type="text" v-model="id">
          </label>
    
          <label>Name:
            <input type="text" v-model="name">
          </label>
    
          <input type="button" value="添加" @click="add">
        </div>
    
        
        
        
        <p v-for="item in list" :key="item.id">
          <input type="checkbox">{
         {item.id}} --- {
         {item.name}}
        </p>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            list: [
              { id: 1, name: '李斯' },
              { id: 2, name: '嬴政' },
              { id: 3, name: '赵高' },
              { id: 4, name: '韩非' },
              { id: 5, name: '荀子' }
            ]
          },
          methods: {
            add() { // 添加方法
              this.list.unshift({ id: this.id, name: this.name })
            }
          }
        });
      </script>
    </body>
    
    </html>

**事件修饰符 ： .stop .prevent .capture .self .once**

**vue.js中的样式 class 样式 style 样式**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
      <style>
        .red {
          color: red;
        }
    
        .thin {
          font-weight: 200;
        }
    
        .italic {
          font-style: italic;
        }
    
        .active {
          letter-spacing: 0.5em;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        
    
        
        
    
        
        
    
        
        
    
        
        <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>
    
    
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: true,
            classObj: { red: true, thin: true, italic: false, active: false }
          },
          methods: {}
        });
      </script>
    
    <div id="app2">
        
        
    
        <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app2',
          data: {
            styleObj1: { color: 'red', 'font-weight': 200 },
            styleObj2: { 'font-style': 'italic' }
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>

[5c1a340d86cd39c7fae0bba1ca3c916a.png]: /images/20221120/7002bec06d75447597a95556e96fdf07.png