赶鸭子上架之Vue学习(一)

Vue下载及安装
阿伟的第一个vue代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
    <style>
        [v-cloak]{
            display: none;
        }
    style>
head>
<body>
    <div id="app">

        <p v-cloak>+++++++++++++++{{ msg }}p>
        <h4 v-text="msg">=============h4>

        <div v-text="msg2">div>

        <div v-html="msg2">div>

        <input type="button" value="按钮" v-bind:title="mytitle + '123'">

        <input type="button" value="按钮" :title="mytitle + '123'">

        <input type="button" value="按钮" v-on:click="show">

        <input type="button" value="按钮" @click="show">
    div>


    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'欢迎学习Vue',
                msg2:'

哈哈哈哈哈哈哈哈哈

'
, mytitle:'这是一个自己定义的title' }, methods:{//methods中定义了当前vue实例所有可用的方法 show:function () { alert('hello') } } })
script> body> html>

阿伟的第二个代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>

head>
<body>
    <div id="app">
        <ul>

            <li v-for="dog in dogs"> {{dog}} li>

            <li v-for="(dog,i) in dogs">{{ dog }} 是第 {{i}} 个li>
        ul>
        <hr>
        <ul>

            <li v-for="n in 10"> {{n}} li>

            <li v-for="n in 10"> {{n-1}} li>
        ul>

        <hr>

        <p>自从你打开这个页面,已经过了 {{seconds}} 秒。p>

        <hr>

        <input type="text" v-model="inputText">
        <p>inputText: {{ inputText }}p>

    div>


    <script>
        new Vue({
            el:'#app',
            data: {
                dogs: ['a','b','c','d'],
                seconds:0,
                inputText:'initial value'
                },
            created(){
                setInterval(()=>{
                    this.seconds++;
                },1000);
            }
        });
    script>
body>
html>

阿伟的第三个代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>

head>
<body>
    <div id="app">

        <input type="text" :value="inputText" value="initial value">
        <p>inputText: {{ inputText }}p>

        <hr>

        <label><input type="radio" v-model="value" value="">label>
        <label><input type="radio" v-model="value" value="">label>
        <label><input type="radio" v-model="value" value="">label>
        <p>选中的 value 值为 {{value}}p>

        <hr>

        <ul>
            <li v-for="number in filterPositive(numbers)"> {{ number }} li>
        ul>

    div>


    <script>
        new Vue({
            el:'#app',
            data: {
                inputText:'',
                value:'一',
                numbers:[-5,0,2,-1,1,0,5]
                },
            methods:{
                //过滤掉所有负数
                filterPositive(numbers){
                    return numbers.filter((number) => number >= 0);
                }
            }
        });
    script>
body>
html>

你可能感兴趣的:(赶鸭子上架之Vue学习(一))