Vue.js basic instructions

<div id="app">
    {
   
   {msg}}<br>
    {
   
   {5+5}}<br>
    {
   
   { ok ? 'YES' : 'NO' }}<br>
    {
   
   { msg.split('').reverse().join(',') }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    msg: 'asdfSF',
  }
})
</script>

v-html and v-text directives

The v-html directive is used to output html code

The v-text instruction is mainly used to update textContent and output the data in the example as plain text.

Example 1

<div id="app">
    <div v-html="msg"></div>
    <div v-text="msg"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    msg: '<h1>Vue教程</h1>'
  }
})
</script>

v-on command

The v-on directive is used to bind event listeners. Similar to the usage of onclick in native JavaScript, some interactions can be performed using this directive. " v-on: "can be abbreviated as "@"

Example 1

    <div id="app">
        <input type="button" value="点击次数" @click="add"/>
        <p>我被按了 {
   
   {count}} 次</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                count:0
            },
            methods:{
                add(){
                    this.count++
                }
            }
        })
    </script>

v-model directive

The essence of the v-model directive is to listen to user input events and update data. At the same time, the v-model directive will ignore the initial values of the value, checked, and selected attributes of all form elements, and it will use the data in the Vue instance as the data source. When an input event occurs, it will update the data in the Vue example in real time, thereby achieving two-way binding of data.

Example 1

    <div id="app">
        <p>input元素：</p>
        <!-- 使用v-model指令在表单上创建双向数据绑定 -->
        <input v-model="message" placeholder="请输入...">
        <p>消息是：{
   
   {message}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'hello',
            }
        })
    </script>

v-if directive

The v-if directive can implement conditional rendering. Vue will render elements based on the true or false value of the expression.

Example 1: Determine how many days there are in February

    <div id="app">
        <input type="text" v-model="year">
        <p v-if="year%4==0 ||year%100==0">{
   
   {show(29)}}</p>
        <p v-else>{
   
   {show(28)}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                year:2023,
            },
            methods:{
                show(num){
                    return this.year+"年2月份有"+num+"天"
                }
            }
        })
    </script>

Example 2: Compare the size of two numbers

    <div id="app">
        请输入第一个数：<input type="text" v-model="num1">
        <br>
        请输入第二个数：<input type="text" v-model="num2">
        <br>
        <p v-if="!this.num1||!this.num2">比较结果：{
   
   {show("请输入正确数字")}}</p>
        <p v-else-if="num1>num2">比较结果：{
   
   {show("第一个数大于第二个数")}}</p>
        <p v-else-if="num1<num2">比较结果：{
   
   {show("第一个数小于第二个数")}}</p>
        <p v-else="num1==num2">比较结果：{
   
   {show("第一个数等于第二个数")}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                num1:'',
                num2:'',
                result:''
            },
            methods:{
                show(da){
                    return  da
                },
            }
        })
    </script>

v-show command

The v-show command and the v-if command have similar functions. Let’s use the following example to distinguish them.

Example 1

<div id="app">
        <div v-if="isTrue">v-if</div>
        <div v-show="isTrue">v-show</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                
            },
            computed:{
                isTrue(){
                    return false;
                }
            }
        })
    </script>

The difference between v-if and v-show

v-if is not displayed because the page is commented

v-show is not displayed because the value of display in CSS is none.

The principle of v-if: dynamically create or remove elements each time to display or hide elements

The principle of v-show: dynamically add or remove the display:none style for elements to display and hide elements.

If you want to frequently switch the display state of elements, use v-show for better performance.

v-for directive

v-for is used to traverse arrays and objects. Its expression needs to be used in conjunction with in.

Traverse array

    <div id="app">
        <ul>
            <li v-for="cloth in clothes">{
   
   {cloth.name}}:${
   
   {cloth.price}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                clothes:[
                    {
                        name:'衬衫',
                        price:'180'
                    },
                   {
                        name:'外套',
                        price:'200'
                   },
                   {
                        name:'裤子',
                        price:'380'
                   }
                ]
            }
        })
    </script>

Traverse objects

    <div id="app">
        <ul>
            <li v-for="(value,key,index) in user">{
   
   {index}}-{
   
   {key}}:{
   
   {value}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                user:{
                    name:"张三",
                    age:"30",
                    sex:"男"
                }
            }
        })
    </script>