search

JackWong992 / article

慢慢来，其实会很快
http://www.feelone.top/article/
2 stars 0 forks source link

The way to the font end: vue入门第一季 #5

Open JackWong992 opened 6 years ago

JackWong992 commented 6 years ago

               logo.png

vue入门第一季

学习vue之前你需要具备以下的知识：

  1. 熟练的使用html标签
  2. 熟悉或者熟练的使用CSS，有写页面的经验
  3. 初，中级的JavaScript的经验

  4. 大致的了解nodeJs的相关知识

    安装vue： 1：本地安装，直接下载到本地 2：CDN引入，直接在页面中引入（推荐使用） 安装方法：vuejs.org(英文网站) cn.vuejs.org(中文网站) > learn > api

学习vue之前希望你具备条件：

  1. 一个代码编辑器（推荐您使用vscode）

  2. 本地服务器，例如：http-server

    lesson_1: 写一个helloworld的小例子吧 先写一个index.html的页面，主要用于指向例子： 第一节代码如下：

    index.html:
`<body>
<h1>vue2.0实例</h1>
<hr>
<ol>
    <li><a href="./01_helloworld.html">hello world实例</a></li>
</ol>
</body>

    然后开始写我们的demo，代码如下：

    <body>
<h1>hello world</h1>
<hr>
<div id="app">{{message}}</div>   //message就是显示要包裹的信息
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        message: 'hello world !'
    }
})
</script>
</body>

    这样我们的一个小例子已经完成了，点击index.html中的“helloworld”会跳转至实例中,页面显示‘hello world’

lesson_2: v-if & v-else &v-show v-if & v-else 看起来很熟悉，相当于我们之前见到的选择判断，那v-show是什么？v-show相当于css中的display：none属性。 实例代码：(下文中都是从index.html引入一个链接，不在演示index.html代码)

v-if.html:
<body>
    <h1>v-if & v-else & v-show</h1>
    <hr>
    <div id="app">
        <div v-if="islogin">
            如果你使用了v-if那么你就可以看到这句话
        </div>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            islogin: true
        }
    })         
    </script>
</body>

解释：如果v-if的选择判断是正确的，那么会正产显示这句话；如果v-if是false，则不会显示这句话。

v-else实例：

<body>
    <h1>v-if & v-else & v-show</h1>
    <hr>
    <div id="app">
        <div v-if="islogin">
            如果你使用了v-if那么你就可以看到这句话
        </div>
        <div v-else="notlogin">
            如果你使用了v-else那么你可以看到这句话
        </div>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            islogin: false,
            notlogin: true
        }
    })
    </script>

解释：如果v-if的显示是正常的，不会显示v-else下面的这句话。同样也就是说，v-else的正常显示必须是在v-if的判断为false的前提下。 v-show和v-if的显示效果类似，这里不做演示。 敲黑板的地方开始了(duang duang duang)： v-if & v-show的区别是啥？

v-on实例：

代码展示：
   <div id="app">
        本场比赛得分：{{fenshu}} <br>
        <button v-on:click="jiafen">加分</button>
        <button @click="jianfen">减分</button>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            fenshu: 0
        },
        methods:{
        jiafen:function(){
            this.fenshu++;
        },
        jianfen:function(){
            this.fenshu--;
        }  
        }
    })
    </script>

v-on组件相当于JS中的时间，其中上述代码中的v-on:click的缩写方法是：@click 自定义加分：

<div id="app">
         本次得分：{{count}}
         <button v-on:click="add">加分</button>
         <input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            count: 1,
            secondCount: 1
        },
        methods:{
            add:function(){
                this.count++;
            },
            onEnter:function(){
                this.count = this.count + parseInt(this.secondCount);
            }
        }
    })
    </script>

解释：这是自定义加分的演示，这里要注意的地方是：在js中两个数字相加是默认为字符串相加，需要转换为数字相加，我在这里使用了parseInt。v-model是绑定数据源的意思，在下面的一节中会提到

lesson_6 v-model双向数据绑定：v-model实现的是双向数据，当用户在文本框输入文字的同时，屏幕也在同时输入文本框中的显示内容；其中v-model有几个属性，分别为：.lazy , .number , .trim .lazy 属性：当用户在输入框输入文字的时候不会显示，离开输入框屏幕内容就会正常显示 .number 属性：当用户输入文字的时候不会显示，只有输入数字的情况下会显示，但是如果一字符为开头的也会正常显示。 .trim属性：屏幕显示去除文本输入的前后空格

code:
 <div id="app"><span v-text="message"></span>
        <h3>文本输入</h3>
    v-model:<input type="text"  v-model="message"><br>
    v-model.lazy: <input type="text" v-model.lazy="message"><br>
    v-model.number:<input type="text" v-model.number="message"><br>
    v-model.trim:<input type="text" v-model.trim="message"><br>
    </div>    
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !'
        }
    })
    </script>

多选框绑定一个值：

code:
<div id="app">
  <label>
    <input type="checkbox"  v-model="istrue" >
    {{istrue}}</label>   
    </div> 
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !',
            istrue: true
        }
    })
    </script>

选中则为true，去掉对号则为false； 多选框绑定数组： 单选框的绑定一个数组：

<label for="istrue">
        <input type="checkbox"  v-model="array_name" value="huangfl">huangfl
    </label>
    <label for="istrue">
        <input type="checkbox"  v-model="array_name" value="jackwong">jackwong
    </label>
    <label for="istrue">
        <input type="checkbox"  v-model="array_name" value="philonghuynh">philonghuynh
    </label><br>
    {{array_name}}
    </div> 
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !',
            istrue: true,
            array_name:[]
        }
    })
    </script>

当点击选框按钮的时候，下面的数组框会显示你选中的信息。 单选框选择性别信息：

<div id="app">
<label >
            <input type="radio" v-model="sex" value="男"> 男
    </labe>
    <label>    
            <input type="radio" v-model="sex" value="女">女      
    </label> <br>
      你选择的性别是：{{sex}}            
    </div> 
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !',
            istrue: true,
            array_name:[],
            sex: '男'        //表示默认选框是男
        }
    })
    </script>

lesson_7： v-bind 标签元素选择属性：

<div id="app">
        <img v-bind:src="imgSrc">
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3116813668,3476052882&fm=173&s=08E273231862B69EFF1500DE0100C091&w=218&h=146&img.JPEG'
        }
    })
    </script>

对于a标签来说，在href输入一样的地址一样可以链接到。 当然也可以这样写：

css:.classA{color : red;}
html:<div v-bind:class="{classA:isok}"> 这行文本用于判断</div>
js: data{
   className:'classA'
   isok:true   //如果是true显示为红色，false则不显示
}

bind标签属性绑定数组元素：

 <div v-bind: class ="[class A,classB]"></div>
 data:{
     classA:'classA',
     classB:'classB'

bind标签属性绑定三元运算符：

<style type="text/css">
    .classA{
        color:red;
    }
    .classB{
        font-size: 50px;
    }
</style>
<body>
    <h1>hello world</h1>
    <hr>
    <div id="app">
        <img v-bind:src="imgSrc">
        <div v-bind:class="isok?classA:classB">你好这个世界</div>
    <hr>
    <input type="checkbox" v-model="isok">
    <label for="isok">isok={{isok}}</label>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            classA: 'classA',
            classB: 'classB',
            isok: true
        }
    })
    </script>

当鼠标点击的时候会显示正确，为classA属性，false的情况下为classB属性 当然v-bind也可以对象style，例如：

html:
 <div v-bind:style='styleObject'>你好，我是小明；如果你绑定了对象属性，那么你会看到这行字会变成红色</div>
js:
  data:{
   styleObject:{
      color:'red',
      fontSize: '20px'  
}
}

lesson_8:指令其他部分 v-pre & v-cloak & v-once： v-pre文本原样输出不经过任何编译，相当于html中的pre代码，直接加入到想要不编译的标签中就可以了 v-cloak: 渲染完成以后才会显示相关信息，只要放在想要的标签中加入即可。 v-once：只执行一次，例如上面所提到的双向数据绑定：

<div id="app">
        <span v-once>{{message}}</span> <br>
        <input type="text" v-model="message" >
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world !'
        }
    })
    </script>

这里的v-once只会执行一次，就是刚刚加载完成时候这一次就会停止。 好了，第一季就到此结束了！