《Vue.js实战》笔记-前五章

最新推荐文章于 2023-06-03 21:32:26 发布

吾读蜈工

最新推荐文章于 2023-06-03 21:32:26 发布

阅读量283

点赞数 1

分类专栏： Vue.js 文章标签： vue.js

Vue.js 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

前3章

<!-- 
      前3章：
      初识Vue.js
      数据绑定
      计算属性

      author：Rain
-->
<html>
    <head>
        <script src="Vue.js"></script>
        <link rel="stylesheet" href="style_0.css">
    </head>
    <body>
        <div id='first' class='center'>
            First Name : {{firstName}}<br>
            Last Name : {{lastName}}<br>
            Full Name : {{fullName}}<br>
            <button @click='changeName'>Change</button>
        </div>
    </body>
    <div id='second' class="center">  
       依赖另一个Vue：{{reversedText}}
    </div>
    <div id='third'>methods:{{date}}
        <button @click='time'><br></button>
        computed:{{now}}
    </div>
</html>
    ```
   ```javascript
    <script>
    
    var first = new Vue ({
        el:'#first', 
        data:{
            firstName:'Rain',
            lastName:'X',
        },
        computed: {
            fullName:{
                get:function(){
                    return this.firstName + ' ' + this.lastName;
                },
                set:function(newNames){
                    var names = newNames.split(' ');;
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        },
        methods:{
            changeName:function(){
                this.firstName = 'Change';
                this.lastName = 'Name'
            }
        }
    })

    var second = new Vue ({
        el:'#second',
        data:{
           comp : '100' 
        },
        computed:{
            reversedText:function(){
                return first.fullName.split(' ').reverse().join('-')
            }
        }
    })

    var third = new Vue ({
        el:'#third',
        data:{
           date: Date.now()
        },
        computed:{
            now: function(){
                return Date.now();
            }
        },
        methods:{
            time:function(){
                return this.date=Date.now();
            }
        }
    })
    </script>

.center{
    text-align: center;
}

div{
    border: 1px solid blue;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-bottom: 5px;
}

第4章

<!-- 
    第4章
        v-bind 及 class 与 style 绑定

         author：Rain
 -->
<html>
  <head>
      <script src="Vue.js"></script>
      <link rel="stylesheet" href="style_1.css">
  </head>
  <body>
      <div id="first" :class="{'active':isActive, 'error':isError}" >
          <p>这是v-bind class 绑定</p>
          <div>
            <p :class="classes">
              class computed           
            </p>
          </div>
        
          <div>
            <p :class="[oneCls,twoCls]">class 数组</p>
          </div>
          
          <div>
            <button :class="classArray">
              Button
            </button>
          </div>
          
          <div>
            <p :style="{'color':color, 'fontSize':fontSize = 'px'}">&nbsp&nbsp:style 绑定内联样式</p>
          </div>

          <div>
            <p :style="styles">写在data和computed里的:style</p>
          </div>

          <div>
              <p :style="[styles,styleA]">数组语法，多样式内联</p>
            </div>
      </div>
  </body>
</html>

  <script>
    var first = new Vue({
      el:'#first',
      data:{
        isActive: true,
        isError: false,
        error: null,
        
        oneCls: 'one',
        twoCls:'two',
        
        size:'large',
        disabled:'true',

        color:'black',
        fontSize:30,

        styles:{
          color:'green', 
          fontSize:'20px'
        },

        styleA:{
          'text-align': 'center'
        }
      },
      computed: {
        classes:function(){
          return {
            error: this.isActive && !this.error,
            'classCom': true
          }
        },
        classArray:function(){
            return [
              'btn',
              {
                ['btn-' + this.size]:this.size !== '',
               ['btn-disabled']:this.disabled
              }
            ];
        }
      }
    })
  </script>

.center{
    text-align: center;
}

div{
    border: 1px solid blue;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-bottom: 5px;
}

.active{
    color:orangered
}

.error{
    font-size: 20px
}

.back-ground{
    background-color: aqua
}

.one{
    font-size: 30px;
    color: green
}

.classCom{
    color: blueviolet
}

.btn{
    color: orangered
}

.btn-large{
    font-size: 30px
}

.btn-disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

第5章

<!-- 
    第5章
    内置指令：v-cloak、v-once、条件指令、列表渲染指令
             方法和事件

    author：Rain
 -->
<!DOCTYPE html>
<html>
<head>
    <script src="Vue.js"></script>
    <link rel="stylesheet" href="style_2.css">
</head>

<body>
    <div id="first" v-cloak>{{mes}}</div>
    
    <div id='second'>
        <template v-if="type==='name'">
            <label> 用户名</label>
            <input placeholder="请输入用户名" key="name-input">
        </template>
        <template v-else>
            <label>邮箱</label>
            <input placeholder="请输入邮箱" key="mail-input">
        </template>
        <button @click='handleToggleClick'>切换输入类型</button>
        <p v-show="status === 1">status等于1时显示该行</p>
    </div>

    <div id='third'>
        <ul>
            <template v-for="book in books">
                <li>书名：{{book.name}}</li>
                <li>作者：{{book.author}}</li>
            </template>
        </ul>

        <ul>
            <template v-for="(value,key,index) in user">
                <li>{{index}} {{key}}: {{value}}</li>
            </template>
        </ul>
        <button onclick="sortedBooks()">排序</button>
    </div>

    <div id="forth">
        <a href="https://www.baidu.com" @click="handleBanClick('禁止打开',$event)">打开连接</a>
        <a href="https://www.baidu.com" @click.prevent="handle">打开连接</a> 
        <!-- $event 访问原生DOM
        事件修饰符 prevent -->
    </div>
</body>
</html>

<script>
    var first = new Vue({
        el:'#first',
        data:{
            mes:'这是一段文本',
        }
    })

    var second = new Vue({
        el:'#second',
        data:{
            type:'name',
            status:1
        },
        methods:{
            handleToggleClick:function(){
                this.type = this.type === 'name' ? 'mail' : 'name' ;
            }
        }
    })

    var third = new Vue ({
        el:'#third',
        data:{
            books:[
            {
                name:'《Vue.js》',
                author:'Rain'
            },
            {
                name:"《前端：HTML5》",
                author:'Warm Car'
            },
            {
                name:'《前端：10天学会JS编程》',
                author:'Jack jorden'
            }
        ],
        
        user:{
            name:'Rain',
            gender:"Man",
            age:23
        }
        },

        // computed: {
        //     sortedBooks:function(){
        //         return this.books.sort(function(a,b){
        //             return a.name.length < b.name.length;
        //         });
        //     }
        // }
    })

    third.books.push({
        name:"《前端：CSS3最新教程》",
        author:'Lea Verou'
    })

    third.books = third.books.filter(function (item){
        return item.name.match(/前端/);
    });

    // third.books.splice(0,1);

     function sortedBooks(){
                return third.books.sort(function(a,b){
                    return a.name.length < b.name.length;
                });
            }

    var forth = new Vue({
        el:'#forth',
        methods:{
            handleBanClick:function (message,event){
                event.preventDefault();
                window.alert(message);
            }
        }
    })
</script>

.center{
    text-align: center;
}

div{
    border: 1px solid blue;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-bottom: 5px;
}

[v-cloak] {
    display: none;
}

吾读蜈工

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《Vue.js实战》笔记-前五章

前3章&amp;amp;lt;!-- 前3章：初识Vue.js 数据绑定计算属性 author：Rain--&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;script src=&amp;quot;Vue.js&
复制链接

扫一扫