小博

V1

2022/07/07阅读:15主题:姹紫

vue 二

跟着官网学Vue(仗剑走天涯)

Class 与 Style 绑定

绑定 HTML Class

  • 对象语法

  • 数组语法

  • 在组件上使用

绑定内联样式

  • 对象语法

  • 数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-template</title>

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

    <style type="text/css">
        .box{
            width100px;
            height100px;
        }
        .active{
            background-color: red;
        }
        .error{
            color: blue;
        }

    
</style>

</head>
<body>

    <div id="app">

        <div :class="{ active: isActive,error: isError}" class="box">
            Hello Vue
        </div>

        <div :class="[active2,error2]">
            Hello xiaobo
        </div>

        <button @click="jihuo">激活</button>
        
        <my-component></my-component>

        <div :style="{ color:activeColor,fontSize: FontSize + 'px' }">
            Hello wangyibo
        </div>
        
        <div :style="styleObject">
            Hello 对象语法
        </div>
        
        <div :style="[styleObject2,styleObject3]">
            Hello 数组语法
        </div>
    </div>

    <script>

        const myComponent = {

            template`<p class="foo bar">Hi!</p>`,
            
            data() {
                return {
                   
                }
            },

        }

        const Root = {

            data() {
                return {
                    isActivefalse,
                    isError:false,
                    active2:"active",
                    error2:"error",
                    activeColor"red",
                    FontSize50,
                    styleObject: {
                        color:"blue",
                        fontSize"100px",
                    },
                    styleObject2: {
                        color:"blue",
                    },
                    styleObject3: {
                        fontSize"20px",
                    }
                }
            },
            methods: {
                jihuo(){
                    this.isActive = !this.isActive;
                    this.isError = !this.isError;
                }
            },
           

        };

        //创建一个vue应用
        const app = Vue.createApp(Root);

        //全局挂载组件
        app.component("my-component",myComponent);

        //挂载
        const mv = app.mount("#app");

    
</script>
    
</body>
</html>

条件渲染

  • v-if

  • v-else

  • v-else-if

  • v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-template</title>

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

</head>
<body>

    <div id="app">

        <div v-if="type === 'A'">
            A
          </div>
          <div v-else-if="type === 'B'">
            B
          </div>
          <div v-else-if="type === 'C'">
            C
          </div>
          <div v-else>
            Not A/B/C
          </div>
          <h1 v-show="ok">Hello!</h1>
        
        
    </div>

    <script>

        const Root = {

            data() {
                return {
                    type"D",
                    oktrue,
                }
            },
           

        };

        //创建一个vue应用
        const app = Vue.createApp(Root);
        //挂载
        const mv = app.mount("#app");

    
</script>
    
</body>
</html>

v-if vs v-show

v-if 是“真正”的条件渲染,因为它会确保在切换过程中,条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-template</title>

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

</head>
<body>

    <div id="app">

        <!-- 数组遍历 -->
        <div>
            <ul id="array-rendering">
                <li v-for="item in items">
                  {{ item.message }}
                </li>
            </ul>
        </div>

        <!-- 参数index -->
        <div>
            <ul id="array-with-index">
                <li v-for="(item, index) of items">
                  {{ parentMessage }} - {{ index }} - {{ item.message }}
                </li>
            </ul>
        </div>

        <!-- 对象 -->
        <div>
            <ul id="v-for-object" class="demo">
                <li v-for="(value,name,index) in myObject">
                  {{ index + 1 }} - {{ name }} - {{ value }}
                </li>
            </ul>
        </div>

        <!-- 整数 -->
        <div id="range" class="demo">
            <span v-for="(n,index) in 10" :key="n">{{ n }}{{ index }} </span>
        </div>

        <!-- 绑定一个key key一般不使用index 一般使用id或者唯一的 都没有情况下使用index -->
        <template v-for="todo in todos" :key="todo.name">
            <li v-if="!todo.isComplete">
              {{ todo.name }}
            </li>
          </template>
        
    </div>

    <script>

        const Root = {

            data() {
                return {
                    items: [{ message'Foo' }, { message'Bar' }],
                    parentMessage'Parent',
                    myObject: {
                        title'How to do lists in Vue',
                        author'Jane Doe',
                        publishedAt'2016-04-10'
                    },
                    todos:[{
                        name:"电脑",
                        isCompletefalse,
                    },
                    {
                      name:"手机",
                      isComplete:true,
                    }]
                }
            },
           

        };

        //创建一个vue应用
        const app = Vue.createApp(Root);
        //挂载
        const mv = app.mount("#app");

    
</script>
    
</body>
</html>

v-for 与 v-if 一同使用时,当它们处于同一节点,v-if 的优先级比 v-for 更高,这意味着 v-if 将没有权限访问 v-for 里的变量:

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-template</title>

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

</head>
<body>

    <div id="app">

        <!-- 监听事件 -->
        <div id="basic-event">
            <button @click="counter += 1">Add 1</button>
            <p>The button above has been clicked {{ counter }} times.</p>
        </div>

        <!-- 事件处理方法 -->
        <div id="event-with-method">
            <!-- `greet` 是在下面定义的方法名 -->
            <button @click="greet">Greet</button>
        </div>

        <!-- 内联处理器中的方法 -->
        <div id="inline-handler">
            <button @click="say('hi',$event)">Say hi</button>
            <button @click="say('what',$event)">Say what</button>
        </div>

        <!-- 多事件处理器 -->
        <div>
            <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
            <button @click="one($event), two($event)">
                Submit
            </button>
        </div>

        <!-- 事件修饰符 -->
        <div>
            <!-- 阻止单击事件继续冒泡 -->
            <a @click.stop="doThis"></a>
            
            <!-- 提交事件不再重载页面 -->
            <form @submit.prevent="onSubmit">
                <input type="text" v-model="username" name="username" placeholder="请输入用户名" />
                <input type="password" v-model="password" name="password" placeholder="请输入密码" />
                <input type="submit" value="提交" />
            </form>
            
            <!-- 修饰符可以串联 -->
            <a @click.stop.prevent="doThat"></a>
            
            <!-- 只有修饰符 -->
            <form @submit.prevent></form>
            
            <!-- 添加事件监听器时使用事件捕获模式 -->
            <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
            <div @click.capture="doThis">...</div>
            
            <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
            <!-- 即事件不是从内部元素触发的 -->
            <div @click.self="doThat">...</div>
        </div>

        <!-- 按键修饰符 -->
        <div>
            <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
            <input @keyup.enter="submit" />
        </div>


        
        
    </div>

    <script>

        const Root = {

           data() {
            return {
                counter0,
                name'Vue.js',
                username"",
                password""
            }
           },
           methods: {
                greet(event) {
                    // `methods` 内部的 `this` 指向当前活动实例
                    alert('Hello ' + this.name + '!')
                    // `event` 是原生 DOM event
                    if (event) {
                        alert(event.target.tagName)
                    }
                },
                say(message,event) {
                   alert(message);
                   alert(event.target.tagName);
               },
               one(evnt){
                    alert("one")
               },
               two(){
                    alert("two")
               },
               onSubmit(){
                    console.log(this.username);
                    console.log(this.password);
               }
            }

        };

        //创建一个vue应用
        const app = Vue.createApp(Root);
        //挂载
        const mv = app.mount("#app");

    
</script>
    
</body>
</html>

按键修饰符

按键别名

  • .enter

  • .tab

  • .delete (捕获“删除”和“退格”键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

系统修饰键

  • .ctrl

  • .alt

  • .shift

  • .meta

鼠标按钮修饰符

  • .left

  • .right

  • .middle

表单输入绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-template</title>

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

</head>
<body>

    <div id="app">

        <!-- 文本 -->
        <div>
            <input v-model="message" placeholder="edit me" />
            <p>Message is: {{ message }}</p>
        </div>
        
        <!-- 多行文本 -->
        <div>
            <span>Multiline message is:</span>
            <p style="white-space: pre-line;">{{ message }}</p>
            <br />
            <textarea v-model="message" placeholder="add multiple lines"></textarea>
        </div>

        <!-- 复选框 -->
        <div>
            <input type="checkbox" id="checkbox" v-model="checked" />
            <label for="checkbox">{{ checked }}</label>
        </div>

        <!-- 多个复选框绑定一个数组上 -->
        <div id="v-model-multiple-checkboxes">
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames" />
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
            <label for="mike">Mike</label>
            <br />
            <span>Checked names: {{ checkedNames }}</span>
        </div>

        <!-- 单选框 绑定的是value -->
        <div id="v-model-radiobutton">
            <input type="radio" id="one" value="One" v-model="picked" />
            <label for="one">One</label>
            <br />
            <input type="radio" id="two" value="Two" v-model="picked" />
            <label for="two">Two</label>
            <br />
            <span>Picked: {{ picked }}</span>
        </div>

        <!-- 选择框 绑定的是value -->
        <div id="v-model-select" class="demo">
            <select v-model="selected">
              <option disabled value="">Please select one</option>
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="c">C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>

        <div id="v-model-select" class="demo">
            <select v-model="selected" multiple>
              <option disabled value="">Please select one</option>
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="c">C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>

        <!-- 动态for渲染 -->
        <div id="v-model-select-dynamic" class="demo">
            <select v-model="selected">
              <option v-for="option in options" :value="option.value">
                {{ option.text }}
              </option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>

        <!-- 修饰符 -->
        <div>
            <!-- 在“change”时而非“input”时更新 -->
            <input v-model.lazy="msg" />{{ msg }}<br>
            <input v-model.number="age" type="text" />{{ age }}<br>
            <input v-model.trim="msg" />{{ msg }}<br>
        </div>
        
    </div>

    <script>

        const Root = {

            data() {
                return {
                    message"",
                    checkedtrue,
                    checkedNames:[],
                    picked:"",
                    selected:"",
                    options: [
                        { text'One'value'A' },
                        { text'Two'value'B' },
                        { text'Three'value'C' }
                    ],
                    age"" ,
                    msg:""
                }
            },
           

        };

        //创建一个vue应用
        const app = Vue.createApp(Root);
        //挂载
        const mv = app.mount("#app");

    
</script>
    
</body>
</html>

修饰符

  • .lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步

  • .number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符

  • .trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符

你知道的越多 你不知道的越多 嘿 我是小博 带你一起看我目之所及的世界......

分类:

后端

标签:

后端

作者介绍

小博
V1