vuejs的学习和使用

最新推荐文章于 2025-03-01 19:48:24 发布
小程序照片合成
最新推荐文章于 2025-03-01 19:48:24 发布
阅读量626
点赞数 1
分类专栏： vuejs javascript 文章标签： javascript vuejs
本文链接：https://blog.youkuaiyun.com/cc1314_/article/details/79085739
版权
javascript 同时被 2 个专栏收录
26 篇文章
订阅专栏
vuejs
4 篇文章
订阅专栏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
<!--<script src="https://unpkg.com/vue"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script src="js/vue.js"></script>
</head>
<body>
<a href="https://cn.vuejs.org/v2/guide" target="_blank">vuejs</a>
<div id="app">
    {{ message?1:2 }}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello vue"
        }
    });
</script>
<div id="app2">
    <span v-bind:title="message">
        11111111111
    </span>
    <span :title="message">
        11111111111
    </span>
    <input @keyup.enter="enter" placeholder="点击我然后按键盘enter"/>
    <!-- Ctrl + Click -->
    <div @click.ctrl="enter">Ctrl + Click鼠标左键</div>
    <div @click.right="enter">Click鼠标右键</div>
</div>
<script>
    var app2 = new Vue({
        el:"#app2",
        data:{
            message:"hello vue"
        },
        methods:{
            enter:function () {
                alert("enter");
            }
        }
    });
</script>
<div id="app3">
    <p v-if="see == 1">222222</p>
    <p v-else-if="see == 2">2223333</p>
    <p v-else>333333</p>
</div>
<script>
    var app3 = new Vue({
        el:"#app3",
        data:{
            see:false
        }
    });
</script>
<div id="app4">
    <p v-for="i in a">
        {{i.text}}
    </p>
    <p v-for="(i,k) in a">
        {{k}}:{{i.text}}
    </p>
    <ul>
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>
    <div v-for="(value, key) in object">
        {{ key }}: {{ value }}
    </div>
    <div v-for="(value, key, index) in object">
        {{ index }}. {{ key }}: {{ value }}
    </div>
</div>
<script>
    var app4 = new Vue({
        el:"#app4",
        data:{
            a:[
                {text:"aaaaaaa"},
                {text:"bbbbbbbbbb"}
            ],
            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            }
        }
    });
</script>
<div id="app5">
    <p>{{text}}</p>
    <p>{{text1}}</p>
    <button v-on:click="wr">反序</button>
    <button @click="wr">反序</button>
</div>
<script>
    var app5 = new Vue({
        el:"#app5",
        data:{
            text:"hello cxx",
            text1:"hi cxx"
        },
        methods:{
            wr:function () {
                this.text = this.text.split(" ").reverse().join(" ");
                this.text1 = this.text.split("").reverse().join("");
            }
        }
    });
</script>
<div id="app6">
    <p>{{text}}</p>
    <input v-model="text" />
</div>
<script>
    var app6 = new Vue({
        el:"#app6",
        data:{
            text:"hello vue"
        }
    });
</script>
<div id="app7">
    <ol>
        <cc class="common" v-for="i in list" v-bind:c="i" v-bind:key="i.id"></cc>
    </ol>
</div>
<script>
    //在初始化根实例之前注册组件
    //注册组件
    Vue.component('cc',{//自定义标签的命名Vue不强制遵循 W3C 规则(小写）
        props:["c"],
        template:'<li class="default">{{c.text}}</li>'
    });
    //初始化根实例
    var app7 = new Vue({
        el:'#app7',
        data:{
            list:[
                {id:0,text:"111111111"},
                {id:1,text:"22222222222"}
            ]
        }
    });
</script>
<div id="app8">
<p>Using mustaches: {{ cc }}</p>
<p>Using v-html directive: <span v-html="cc"></span></p>
</div>
<script>
    var app8 = new Vue({
        el:"#app8",
        data:{
            cc:"<span style='color:red;'>11111111</span>"
        }
    });
</script>
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el:"#example",
data:{
message:"hello"
},
computed:{
reversedMessage:function(){
return this.message.split("").reverse().join("");
}
}
});
</script>
<div id="app9">{{fullName}}</div>
<div id="demo">{{ fullName }}</div>
<script>
    var app9 = new Vue({
        el:"#app9",
        data:{
            firstName:"chen",
            lastName:"cong"
        },
        computed:{
            fullName:function () {
                return this.firstName+" "+this.lastName;
            }
        }
    });
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
</script>
<div id="app10">{{fullName}}</div>
<script>
    var app10 = new Vue({
        el:"#app10",
        data:{
            firstName:"chen",
            lastName:"cong"
        },
        computed:{
            fullName:{
                get: function () {
                    return this.firstName + " " + this.lastName;
                },
                set:function (val) {
                    var names = val.split(" ");
                    this.firstName=names[0];
                    this.lastName=names[names.length-1];
                }
            }
        }
    });
</script>
<div id="app11">
    <input v-model="question" />
    <p>{{answer}}</p>
</div>
<script>
    var app11 = new Vue({
        el:"#app11",
        data:{
            question:"请输入",
            answer:"等待输入"
        },
        watch:{
            question:function (val) {
                this.answer = "输入：" + val;
            }
        }
    })
</script>
<div id="app12">
    <p class="static" :class="classo">3333333</p>
    <p :class="[class1,class2]">4444444</p>
    <p :class="[is?class1:'',class2]">5555555555</p>
    <p :style="css1">666666</p>
    <p :style="[css1,css2]">666666</p>
</div>
<script>
    var app12 = new Vue({
        el:"#app12",
        data:{
            classo:{
                active:true,
                "text":false
            },
            is:false,
            class1:"cc1",
            class2:"cc2",
            css1:{
                color:"red"
            },
            css2:{
                fontWeight:"bold"
            }
        }
    })
</script>
<div id="app13">
    <div v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </div>
    <div v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </div>
    <button @click="login">Toggle login type</button>
    <div v-if="loginType1 === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="Username">
    </div>
    <div v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="Email">
    </div>
    <button @click="login1">Toggle login type</button>
</div>
<script>
    var app13 = new Vue({
        el:"#app13",
        data:{
            loginType:"username",
            loginType1:"username"
        },
        methods:{
            login:function () {
                this.loginType = (this.loginType == "username")?"Email":"username";
            },
            login1:function () {
                this.loginType1 = (this.loginType1 == "username")?"Email":"username";
            }
        }
    })
</script>
<div id="app14">
    <div id="todo-list-example">
        <input
                v-model="newTodoText"
                v-on:keyup.enter="addNewTodo"
                placeholder="Add a todo"
        >
        <ul>
            <li
                    is="todo-item"
                    v-for="(todo, index) in todos"
                    v-bind:key="todo.id"
                    v-bind:title="todo.title"
                    v-on:remove="todos.splice(index, 1)"
            ></li>
        </ul>
    </div>
</div>
<script>
    Vue.component('todo-item', {
        template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
        props: ['title']
    })

    new Vue({
        el: '#app14',
        data: {
            newTodoText: '',
            todos: [
                {
                    id: 1,
                    title: 'Do the dishes',
                },
                {
                    id: 2,
                    title: 'Take out the trash',
                },
                {
                    id: 3,
                    title: 'Mow the lawn'
                }
            ],
            nextTodoId: 4
        },
        methods: {
            addNewTodo: function () {
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText = ''
            }
        }
    })
</script>
<div id="app15">
    <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>
<script>
    var app15 = new Vue({
        el:"#app15",
        data:{
            checkedNames:[]
        }
    });
</script>
<div id="app16">
    <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>
<script>
    var app16 = new Vue({
        el:"#app16",
        data:{
            picked: ''
        }
    });
</script>
<div id="app17">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
    <span>Seleted:{{selected}}</span>
</div>
<script>
    var app17 = new Vue({
        el:"#app17",
        data:{
            selected:""
        }
    });
</script>
<div id="app18">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
    </select>
    <span>选择：{{selected}}</span><br>
    <input v-model.number="age" type="number" placeholder="输入数值">
    <input v-model.trim="msg" placeholder="自动过滤用户输入的首尾空白字符">
</div>
<script>
    var app18 = new Vue({
        el:"#app18",
        data:{
            selected:"",
            options:[
                {text:"请选择",value:""},
                {text:"one",value:"A"},
                {text:"two",value:"B"},
                {text:"three",value:"C"}
            ],
            age:"",
            msg:""
        }
    });
</script>
<!--HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：
Vue.component('child', {
// 在 JavaScript 中使用 camelCase
//Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!– 在 HTML 中使用 kebab-case –>
<child my-message="hello!"></child>
如果你使用字符串模板，则没有这些限制。-->
<div id="app19">
    <p>{{total}}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <!--使用 v-on 绑定自定义事件-->
</div>
<script>
    //子组件跟父组件通信
    Vue.component('button-counter',{
        template:'<button v-on:click="incrementCounter">{{counter}}</button>',
        data:function () {
            return {
                counter:0
            }
        },
        methods:{
            incrementCounter:function () {
                this.counter++;
                this.$emit("increment");//触发事件
            }
        }
    });
    var app19 = new Vue({
        el:"#app19",
        data:{
            total:0
        },
        methods:{
            incrementTotal:function () {
                this.total++;
            }
        }
    });
</script>
<div id="app20">
    <h1>我是父组件的标题</h1>
    <myele>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
    </myele>
</div>
<script>
    Vue.component("myele",{
        template:'<div>\n' +
        '  <h2>我是子组件的标题</h2>\n' +
        '  <slot>\n' +
        '    只有在没有要分发的内容时才会显示。\n' +
        '  </slot>\n' +
        '</div>'
    });
    var app20 = new Vue({
        el:"#app20",
        data:{
            message:"hello vue"
        }
    });
</script>
<div id="app21">
    <myele1>
        <h1 slot="header">这里可能是一个页面标题</h1>

        <p>主要内容的一个段落。</p>
        <p>另一个主要段落。</p>

        <p slot="footer">这里有一些联系信息</p>
    </myele1>
</div>
<script>
    Vue.component("myele1",{
        template:'<div class="container">\n' +
        '  <header>\n' +
        '    <slot name="header"></slot>\n' +
        '  </header>\n' +
        '  <main>\n' +
        '    <slot></slot>\n' +
        '  </main>\n' +
        '  <footer>\n' +
        '    <slot name="footer"></slot>\n' +
        '  </footer>\n' +
        '</div>'
    });
    var app21 = new Vue({
        el:"#app21",
        data:{
            message:"hello vue"
        }
    });
</script>
<div id="app22">
    <component v-bind:is="currentView"></component>
</div>
<script>
    var app22 = new Vue({
        el:"#app22",
        data:{
            currentView:"home"
        },
        components:{
            home:{
                template:'<p>1</p>'
            },
            home1:{
                template:'<p>2</p>'
            }
        }
    });
</script>
<div id="app23">
    <test23 ref="profile"></test23>
    <!--在 JavaScript 中直接访问子组件,使用 ref 为子组件指定一个引用 ID-->
</div>
<script>
    var app23 = new Vue({
        el:"#app23",
        components:{
            test23:{
                template:'<p>2</p>'
            }
        }
    });
    console.log(app23.$refs.profile);
</script>
<div id="app24">
    <test24html></test24html>
</div>
<script type="text/x-template" id="test24">
    <p v-once>3</p>
</script>
<!--当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来-->
<script>
    Vue.component("test24html",{
        template:"#test24"
    });
    var app24 = new Vue({
        el:"#app24"
    });
</script>
<div id="app25">
    <p v-cc>1</p>
</div>
<script>
    Vue.directive("cc",{
        inserted:function(el){
            el.innerHTML="2";
        }
    });
    var app25 = new Vue({
        el:"#app25",
        data:{
            message:"hello vue"
        }
    });
</script>
<div id="app26">
    <p v-cc>2</p>
</div>
<script>
    var app26 = new Vue({
        el:"#app26",
        data:{
            message:"hello vue"
        },
        directives:{
            cc:{
                inserted:function(el){
                    el.innerHTML="3";
                }
            }
        }
    });
</script>
<div id="app27">
    <div v-demo="{ color: 'white', text: 'hello!' }"></div>
</div>
<script>
    Vue.directive('demo', function (el, binding) {
        el.innerHTML=binding.value.color+","+binding.value.text;
    })
    var app27 = new Vue({
        el:"#app27",
        data:{
            message:"hello vue"
        }
    });
</script>
</body>
</html>