VUE基本学习

最新推荐文章于 2024-08-02 00:33:58 发布

欣欣今天敲代码了没

最新推荐文章于 2024-08-02 00:33:58 发布

阅读量42

点赞数

文章标签： vue Powered by 金山文档

本文链接：https://blog.csdn.net/m0_61909204/article/details/129470799

版权

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：


<div id="app">
  <site-name title="Google"></site-name>
  <site-name title="Runoob"></site-name>
  <site-name title="Taobao"></site-name>
</div>
 
<script>
const app = Vue.createApp({})
 
app.component('site-name', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})
 
app.mount('#app')
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <!--添加连接-->
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
    <style>
    </style>
    <body>
        <!--show要放在大盒子里-->
    <div id="showcommpent">
    <!--组件使用-->
    <!--<abc age="18"></abc>
    <abc age="41"></abc>
    <abc age="61"></abc>
    <abc age="16"></abc>
    <abc age="60"></abc>-->
    
      <abc title="Google" name="123"></abc>
    <abc title="Runoob" name="123"></abc>
      <abc title="Taobao" name="123"></abc>
      
    </div>
        
    </body>
    <script type="text/javascript">
// 每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。
//    当我们挂载应用时，该组件被用作渲染的起点。
//一个应用需要被挂载到一个 DOM 元素中。

//  props 用于组件的传值，他的工作就是为了接受外面传过来的数据，是一个配置项，与data、el、ref 是一个级别的。
    var data={
        data(){
            return{
            }
        }
    }
    
    //组件定义
    var commpnent={
        //接收外界的变量
        props: ["title","name","age"],
        data(){
            return{
                msg:"组件内部变量"
            }
        },
        template: 
        
        '<h4>{{title + name}}</h4>'
    }
    
    //数据渲染
    var vueapp=Vue.createApp(data);
    //添加组件
    vueapp.component("abc",commpnent);
    //数据挂载
    vueapp.mount("#showcommpent");
    
    </script>
</html>
<!--prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：-->

computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新, computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
    </head>
    <body>
        <div id="vueapp">
            <h1>{{a}}</h1>
            <h2>{{b}}</h2>
        </div>
        <script>
            //数据处理
            var data={
                data(){
                    return{a
                        show1:"a",
                        show2:"b"
                    }
                    
            },
            computed:{
                a:function(){
                    this.show1="abc"
                    return this.show1
                },
                b:function(){
                    this.show2="efg"
                    return this.show2
                }
            }
        }
            //应用创建
            Vue.createApp(data).mount("#vueapp");
            
        </script>
    </body>
</html>

实现三级联动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
    </head>
    <body>
        <div id="vueapp">
            <!--<h1>{{show1}}</h1>
            <h2>{{show1}}</h2>
            <input v-model="show1" type="text" placeholder="show1"/>-->
        
    
        
        <select v-model="show1" >
            <option>湖南省</option>
            <option>湖北省</option>
            <option>广东省</option>
        </select>
        
        <!--定义selected变量接收数据-->
        <select v-model="selected">
            <option v-for="c in city" :value="c" selected>{{c}}</option>
        </select>
        <!--取消绑定-->
        <select>
            <option v-for="a in areazone">{{a}}</option>
        </select>
        
        <!--<input type="button" @click="counter++"  value="更新"/>-->
        
        
        </div>
        <script>
        
            //数据处理
            var data={
                data(){
                    return{
                        show1:"aaaa",
                        show2:"b",
                        city:[],
                        areazone:[],
                        counter:0,
                        selected:''
                    }
        },
            watch:{
                //一个新值，一个旧值
                show1:function(nv,ov){
                this.city=[]
                this.areazone=[]
                console.log(nv+ov)    
                if(nv=="湖南省"){
                    this.city.push("株洲市")
                    this.city.push("长沙市")
                    this.city.push("湘潭市")
                }
                if(nv=="湖北省"){
                    this.city.push("武汉市")
                    this.city.push("襄阳市")
                    this.city.push("宜昌市")
                }
                if(nv=="广东省"){
                    this.city.push("广州市")
                    this.city.push("深圳市")
                    this.city.push("中山市")
                }
                },
                
                //selected监听数据的变化
                selected:function(nv,ov){
                console.log(nv)
                console.log(nv[1])
                console.log(1)
                if(nv=="株洲市"){
                    this.areazone.push("芦淞区")
                    this.areazone.push("荷塘区")
                    this.areazone.push("天元区")
                }
                if(nv=="长沙市"){
                    this.areazone.push("A市")
                    this.areazone.push("B市")
                    this.areazone.push("C市")
                }
                if(nv=="武汉市"){
                    this.areazone.push("D区")
                    this.areazone.push("E区")
                    this.areazone.push("F区")
                }
                console.log(this.areazone);
                }
                
            }
        }
            
            //应用创建
            Vue.createApp(data).mount("#vueapp");

            
        </script>
    </body>
</html>

欣欣今天敲代码了没

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基本学习

是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新, computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。computed是vue的。
复制链接

扫一扫