初学VUE1

最新推荐文章于 2022-04-14 21:05:49 发布

记得学习

最新推荐文章于 2022-04-14 21:05:49 发布

阅读量69

点赞数

本文链接：https://blog.csdn.net/weixin_44859545/article/details/118094515

版权

<%--
 在单向绑定v-bind中只可以改变页面，当内存变量开始改变，页面也会重新渲染
 但是在双向绑定v-model中可以改变内存中的变量进而影响页面，只作用于有value值的属性
 事件绑定v-on事件名可以是函数也可以是表达式
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>单双向数据绑定</title>
  </head>
  <body>
<%--    留坑--%>
  <div id="div1"></div>
<%--导包--%>
  <script type="text/javascript" src="js/vue.js"></script>
<%--  实例化--%>
  <script type="text/javascript">
    new Vue({
      // el是指向坑的id
      el:"#div1",
      // template 中要加入反单引号（在tab键上面）
      template:
            ` <div>
                单向数据绑定，对应下面的name属性值
                <input type='text' v-bind:value="name" v-bind:class="name"></br>
                 双向数据绑定，对应下面的name值
                <input type='text' v-model="name" v-model:class="name"></br>
                <button v-on:click='name="改变name"'>事件触发改变name</button></br>
                <button v-on:click='change'>函数的形式改变name</button>
            </div>`
            ,
      data:function(){
          return {
            name: 'Hello'
          }
          }
          ,
      methods:{
        change:function(){
          this.name="函数改变"
        }
      }
    })
  </script>
  </body>
</html>

<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2021/6/16
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>过滤器</title>
</head>
<body>
<%--    留坑--%>
<div id="div1">
    <div id="div2">
        <input type="text" id="text1" v-model='instring'/></br>
        {{instring}}</br>
<%--        instring是指要处理的数据，reversal()是指过滤器函数--%>
        {{instring|reversal('局部过滤器翻转：')}}</br>
        {{instring|reversal2('全局过滤器翻转：')}}</br>
    </div>

</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%--  实例化--%>
<script type="text/javascript">
    Vue.filter('reversal2',function (val,arg2){
        return arg2+val.split('').reverse().join('');
    })
    new Vue({
        el:'#div2',
        data(){
            return {
                instring:''
            }
        }
        ,
        filters:{
            reversal(val,arg2){
                return arg2+val.split('').reverse().join('');
            }
        }

    })
</script>
</body>
</html>

<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2021/6/16
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>监听器</title>
</head>
<body>
<%--    留坑--%>
<div id="div1">
    <div id="div2">
        <input type="text" id="text2" v-model='msg2'/></br>
        <input type="text" id="text1" v-model='msg1.text'/></br>
        (<input type="text"  v-model='n1'/>+<input type="text"  v-model='n2'/>)
<%--        result是函数名，{{函数名}}代表获得函数的返回值--%>
        *<input type="text"  v-model='n3'/>={{result}}
    </div>

</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%--  实例化--%>
<script type="text/javascript">

    new Vue({
        el:'#div2',
        data(){
            return{
                msg2:'',
                msg1:{text:''},
                n1:'',
                n2:'',
                n3:''
            }
        }
        ,
        watch:{
            // 这下面的函数函数名msg2要和data中的msg2同名，意思是对msg2这个属性监听
            // ，里面的两个参数代表新老数据（也可以不写），只能监听普通数据
            msg2(val1,val2){
                console.log(val1+'接着'+val2)
                if(this.msg2=='love'){
                    alert(val1);
                }
            },
            // 深度监听，可以监听数组对象等，这里面不能写成函数msg，而是写成属性，函数是handler
           msg1:{
                handler(newval,oldval){
                   if(this.msg1.text=='love'){
                       alert(newval.text);
                   }
               },
               deep:true
           }
        }
        ,
        computed:{
            result(){
               return (Number(this.n1)+Number(this.n2))*Number(this.n3);
            }
        }
    })
</script>
</body>
</html>

<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2021/6/16
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>组件三部曲</title>
<%--    声明注册使用--%>
</head>
<body>
<%--    留坑--%>
<div id="div1">
    <div id="div2">
    </div>

</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%--  实例化--%>
<script type="text/javascript">
    // 声明，在这下面vue中有的属性这里面都可以有
    //语法糖
    // var myheader={
    //     template: `<div>我是头部</div>`
    // }
    var myheader=Vue.extend({
        template: `<div>我是头部</div>`
    })
    var mybody={
        template: `<div>我是身体</div>`
    }
    // 以上的全是局部的组件，现在创建全局的
    Vue.component('myfooter',
        {template:`<div>我是尾部</div>`})
    new Vue({
        el:'#div2',
        data(){
            return{
            }
        }
        ,
        // 注册
        components:{
            myheader,
            mybody
        }
        ,
        template:
        // 使用
            `<div>
                <myheader></myheader>
                <mybody></mybody>
                <myfooter></myfooter>
            </div>`
    })
</script>
</body>
</html>

<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2021/6/16
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>slot</title>
<%--    声明注册使用--%>
</head>
<body>
<%--    留坑--%>
<div id="div1">
    <div id="div2">
    </div>

</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%--  实例化--%>
<script type="text/javascript">
    /*子组件要在父组件上面，不然无法注册*/
    var child ={
        template:`<div>我是子组件</div>`,
        data(){
            return {
                msg:"Hello子组件",
            }
        }
        ,
        created(){
            console.log(this.$parent)
        }
    }
    // 在div中slot可以显示内容，当slot中name属性不写时，就是在parent组件下的所有的子标签的所有内容
    //但是在一旦出现name标签时会一一对应
    var parent ={
        template:`<div>我是父组件</br>
                    <slot></slot>
                    <slot name='Hello'></slot>
                    <child ref="op"></child>
                    </div>`,
        // 在父组件中对子组件注册
        components: {
            child,
        },
        data(){
            return{
                msgp:"Hello父组件"
            }
        },
        mounted(){
            console.log(this.$refs.op)
        }
    }
   new Vue({
    el:'#div2'
       ,
    data(){
        return {

        }
    }
    ,
       // 对父标签注册
    components:{
        parent,

    },
    template:
        `<div>
        <parent>
            <div>我是插槽内容</div>
             <div>我是插槽内容2</div>
             <div slot='Hello'>我是插槽内容3</div>
             <div>我是插槽内容4</div>
        </parent>
        </div>`

   })
</script>
</body>
</html>

<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2021/6/16
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>子传父</title>
<%--    声明注册使用--%>
</head>
<body>
<%--    留坑--%>
<div id="div1">
    <div id="div2">
    </div>

</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%--  实例化--%>
<script type="text/javascript">

   //子传给父
   /*1、在这里面是通过事件sendParent触发emit*/
    var child2 ={
        template:`<button @click='sendParent'>改变父标签的内容</button>`,
        methods:{
            sendParent(){
                this.$emit("parent","改变你咋的")
            }
        }
    }
    /*2、在子组件触发后父组件通过子组件child2用emit的key等于函数名，用这个函数来做出接收信息*/
    var parent2={
        template:`<div >
                父组件：{{msg}}
                <child2 @parent='reserve'></child2>
                </div>`,
        components: {
            child2
        },
        data(){
            return{
                msg:'有本事改变我呀'
            }

        },
        methods: {
            reserve(val){
                this.msg=val;
            }
        }

    }
   new Vue({
    el:'#div2'
    ,
       // 对父标签注册
    components:{
        parent2,

    },
    template:
        `
<parent2></parent2>`

   })
</script>
</body>
</html>

记得学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学VUE1

<%-- 在单向绑定v-bind中只可以改变页面，当内存变量开始改变，页面也会重新渲染但是在双向绑定v-model中可以改变内存中的变量进而影响页面，只作用于有value值的属性事件绑定v-on事件名可以是函数也可以是表达式--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>单双向数据绑定&l.
复制链接

扫一扫