VUE入门基础笔记

1,首先说明,这篇笔记是参照尚硅谷vue教程视频而来,如有侵权,请联系删除

2,直接上示例

3.1 vue数据绑定

<div id="app">
    <h2>数据绑定h2>
    <input type="text" v-model="msg"/>
    <p>{{msg}}p> 
div>
<script type="text/javascript" src="../js/vue.js">script>
<script>
    const  vm= new Vue({
        el:'#app',//dom元素
        data:{
            msg:''
        }
    })
script>

3.2强制数据绑定及事件绑定

<body>
<div id="app">
    
    <input type="text" v-model="msg"/>
    <p>{{msg}}p>
    <p>{{msg.toUpperCase()}}p>
    <p>{{msg.toLowerCase()}}p>

    
    <img :src="imgUrl"/>
    <img src="imgUrl"/> 
    

    
    <button @click="test">clickbutton>
    <button @click="test()">clickbutton>
    <button @click="test1(msg)">clickbutton>

div>
<script type="text/javascript" src="vue.js">script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            msg:'',
            imgUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=311212150,89993752&fm=26&gp=0.jpg',
            test1(content){ //方法可以写在data里面,也可以写在methods里面
                alert("test2 HELLO")
            }
        },
        methods:{
            test(){
                alert("hello")
            }
        }
    })
script>
body>

3.3属性计算及属性监听

<body>
<div id="app">
    姓:<input type="text" placeholder="lastName" v-model="lastName"/>
    名:<input type="text" placeholder="firstName" v-model="firstName"/>
    <br>
    全名:<input type="text" placeholder="fullName1" v-model="fullName1"/>
    <br>
    全名:<input type="text" placeholder="fullName2" v-model="fullName2"/>
    <br>
    全名:<input type="text" placeholder="fullName3" v-model="fullName3"/>
    <p>{{firstName}} - {{lastName}}p>
    单向:<p>{{fullName1}}p>
    反向:<p>{{fullName3}}p>
    双向:<p>{{fullName2}}p>
div>
<script type="text/javascript" src="vue.js">script>
<script>
    const  vm = new Vue({
        el:'#app',
        data:{
            lastName:'',
            firstName:'',
            fullName3:''
        },
        computed:{ //属性计算
            fullName1(){ //使用方法返回数据
                return this.firstName +'-'+ this.lastName
            },
            fullName2:{//使用对象返回,需要设计set,get方法
                set(val){
                   const names= val.split('-');
                    this.firstName= names[0];
                    this.lastName= names[1];
                },
                get(){
                    return this.firstName +'-'+ this.lastName
                }
            }
        },
        watch:{//属性的监视方法一; 对于监听的属性一定需要在data里面定义,否则会出错
            firstName: function(val){//相当于属性的set方法
                this.fullName3 = val +"-" + this.lastName
            }
        }
    })
    //属性监视二
        vm.$watch('lastName',function(val){
            this.fullName3 = this.firstName +"-" + val
        })

script>
body>

3.4样式绑定

<style type="text/css">
    .aCLASS{
        color: red;
    }

    .bCLASS{
        color: blue;
    }

    .cCLASS{
        font-size: 100px;
    }

style>
<body>
<div id="app">
<p :class="aCLASS">classA字符串p>
<p :class="{aCLASS: hasClassA, bCLASS: hasClassB}">classB对象p>
<p :class="['aCLASS', 'bCLASS']">classC数组p>

    <p :style="{color:activeColor, fontSize}">style样式绑定p>

    <button @click="update">更新变色button>
div>
<script type="text/javascript" src="vue.js">script>
<script>
    new Vue({
        el:'#app',
        data:{
            aCLASS:'aCLASS',
            hasClassA: true,
            hasClassB: false,
            activeColor:'red',
            fontSize : '50px'
        },
        methods:{
            update(){
              this.aCLASS='cCLASS';
              this.hasClassA=!this.hasClassA;
              this.hasClassB=!this.hasClassB;
              this.activeColor='green',
              this.fontSize = '20px'
            }
        }
    })
script>
3.5 v-if 条件渲染
<
body> <div id = "app"> <p v-if="ok">成功p> <p v-else>失败p> <p v-show="ok">成功p> <p v-show='!ok'>失败p> <button @click="ok=!ok">切换button> div> <script type="text/javascript" src="vue.js">script> <script> new Vue({ el:'#app', data:{ ok:true } }) script>
3.6 for循环/列表过滤
<body>
<div id="app">
    <input type="text" placeholder="search" v-model="searchName"/>
<h2>列表查询h2>
    <ul>
        <li v-for="(p,index) in filterPersons" :key="index">
            {{p.id}} -- {{p.name}} -- {{p.age}}
        li>
    ul>
    <button @click="setOrderType(1)">升序button>
    <button @click="setOrderType(-1)">降序button>
    <button @click="setOrderType(0)">复原button>
div>
<script type="text/javascript" src="vue.js">script>
<script>
    new Vue({
        el:'#app',
        data:{
            searchName:'',
            orderType:0,
            persons:[
                {id:1,name:'tom',age:15},
                {id:2,name:'jack',age:14},
                {id:3,name:'bob',age:16},
                {id:4,name:'Mary', age:20}
            ]
        },
        computed:{
            filterPersons(){
            //先取出数据
                const {searchName,persons,orderType} =this;
                let arr=[...persons];
                //过滤数组
                if(searchName.trim())
                {
                    arr=persons.filter(p=>p.name.indexOf(searchName) !== -1)//数组的过滤
                }
                //s数组排序
                if(orderType)
                {
                    arr.sort(function(p1,p2){ //数组的sort方法的重写
                        if(orderType === 1)
                        {
                            return p1.age-p2.age;
                        }else
                        {
                            return p2.age-p1.age;
                        }
                    })
                }
                return arr;
            }
        },
        methods:{
            setOrderType(orderType){
                this.orderType = orderType;
            }
        }
    })
script>
3.7 事件处理
<body>


<div id="app">
<h2>绑定监听h2>
    <button @click="test">test1button>
    <button @click="test2('abc')">test2button>
    <button @click="test3('abc',$event)">test3button>

    <h2>2. 事件修饰符h2>
    <a href="http://www.baidu.com" @click.prevent="test4">百度a>
    <div style="width: 200px;height: 200px;background: red" @click="test5">
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6">div>
    div>
    <h2>3. 按键修饰符h2>
    <input type="text" @keyup.13="test7">
    <input type="text" @keyup.enter="test7">
div>

<script type="text/javascript" src="vue.js">script>
<script>
    new Vue({
        el:'#app',
        data:{

        },
        methods:{
            test(){
                alert('test1')
            },
            test2(val){
                alert(val)
            },
            test3(val,event){
                alert(val +"--" + event.target.textContent)
            },
            test4(){
                alert('点击了链接')
            },
            test5(){
                alert('out')
            },
            test6(){
                alert('inner')
            },
            test7 (event) {
                alert(event.target.value)
            }
        }
    })
script>
3.8 表单数据绑定
<div id="demo"> <form action="/xxx" @submit.prevent="handleSubmit"> <span>用户名: span> <input type="text" v-model="username"><br> <span>密码: span> <input type="password" v-model="pwd"><br> <span>性别: span> <input type="radio" id="female" value="女" v-model="sex"> <label for="female">label> <input type="radio" id="male" value="男" v-model="sex"> <label for="male">label><br> <span>爱好: span> <input type="checkbox" id="basket" value="basket" v-model="likes"> <label for="basket">篮球label> <input type="checkbox" id="foot" value="foot" v-model="likes"> <label for="foot">足球label> <input type="checkbox" id="pingpang" value="pingpang" v-model="likes"> <label for="pingpang">乒乓label><br> <span>城市: span> <select v-model="cityId"> <option value="">未选择option> <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}option> select><br> <span>介绍: span> <textarea rows="10" v-model="info">textarea><br><br> <input type="submit" value="注册"> form> div> <script type="text/javascript" src="vue.js">script> <script> new Vue({ el:'#demo', data:{ username:'', pwd:'', sex:'', likes:['foot'], cityId:'2', info:'', allCitys:[{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}] }, methods:{ handleSubmit () { console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info) alert('提交注册的ajax请求') } } }) script>
3.9 过滤器

<
body> <div id="test"> <h2>显示格式化的日期时间h2> <p>{{time}}p> <p>最完整的: {{time | dateString}}p> <p>年月日: {{time | dateString('YYYY-MM-DD')}}p> div> <script type="text/javascript" src="vue.js">script> <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js">script> <script> // 定义过滤器 Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') { return moment(value).format(format); }) new Vue({ el: '#test', data: { time: new Date() }, mounted () {//初始化 setInterval(() => { this.time = new Date() }, 1000) } }) script>
3.10 指令

<
head> <meta charset="UTF-8"> <title>Titletitle> <style> [v-cloak] { display: none } style> head> <body> <div id="example"> <p v-cloak>{{content}}p> <p v-text="content">p> <p v-html="content">p> <p ref="msg">abcdp> <button @click="hint">提示button> div> <script type="text/javascript" src="vue.js">script> <script type="text/javascript"> new Vue({ el: '#example', data: { content: '百度一下' }, methods: { hint () { alert(this.$refs.msg.innerHTML) } } }) script> body>
3.11 自定义指令

<div id="test"> <p v-upper-text="msg">p> <p v-lower-text="msg">p> div> <div id="test2"> <p v-upper-text="msg">p> <p v-lower-text="msg">p> div> <script type="text/javascript" src="vue.js">script> <script type="text/javascript"> // 注册一个全局指令 // el: 指令所在的标签对象 // binding: 包含指令相关数据的容器对象 Vue.directive('upper-text', function (el, binding) { console.log(el, binding) el.textContent = binding.value.toUpperCase() }) new Vue({ el: '#test', data: { msg: "I Like You" }, // 注册局部指令 directives: { 'lower-text'(el, binding) { console.log(el, binding) el.textContent = binding.value.toLowerCase() } } }) new Vue({ el: '#test2', data: { msg: "I Like You Too" } }) script>
3.12 插件

<
div id="demo"> <p v-my-directive="msg">p> div> body> <script type="text/javascript" src="../js/vue.js">script> <script type="text/javascript" src="vue-plugins.js">script> <script> //使用自定义插件 Vue.use(myPlugin); var vm= new Vue({ el:"#demo", data:{ msg:"atguigu" } }); //调用自定义的静态方法 Vue.MyGlobalMethod(); //调用自定义的对象方法 vm.$myMethod() //----插件 (function(){ const myPlugin={}; myPlugin.install=function (Vue,options) { //1,添加全局方法或属性 Vue.MyGlobalMethod=function(){ alert('vue 函数对象方法执行'); } //2,添加全局资源 Vue.directive('my-directive',function (el,binding) { el.innerHTML='myPlugin my-directive'+binding.value }); //3,添加实例方法 Vue.prototype.$myMethod=function () { alert('vue 示例对象的方法执行'); } } //对外暴露插件 window.myPlugin=myPlugin; })()

 

转载于:https://www.cnblogs.com/pierceming/p/10293304.html

你可能感兴趣的:(VUE入门基础笔记)