Vue 简单的总结二

Posted heshun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 简单的总结二相关的知识,希望对你有一定的参考价值。

表单输入绑定

数据双向绑定 v-model 绑定相同的属性 当属性变化绑定的标签内容也跟着变化

v-model 只能应用像在input textare select 标签

v-model.lazy 懒监听 不及时更改 当失焦的时候才更改

v-model.number 限制只能输入数字

v-model.trim 取出两边空格

<body>
<div id="app">
    <label for="username">用户名:</label>
    <input type="text" v-model="msg" id="username">
    <p>{{ msg }}</p>
    <textarea placeholder="add multiple lines" v-model=‘msg‘></textarea>

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br>
    <!--多个复选框 使用列表保存-->
    <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>
    <br>
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
    <!--懒监听-->
    <input v-model.lazy="msg" >
    <!--数字显示-->
    <input v-model.number="age" type="number">
    <!--清除前后空格-->
    <input v-model.trim="msg">

</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: #app,
        data() {
            return {
                msg: alex,
                checked: false,
                checkedNames: [],
                selected:‘‘,
                age:0
            }

        }
    })

</script>
</body>

组件化开发

我们定义的组件全部写在一个文件中,所以认为是全局的将来我们 通过import导入,引用局部组件

2.局部组件

打油诗: 声子 挂子 用子

父子组件可以不使用template,但子组件最好还是有 注意:template中的标签一定要用一个标签包起来不然报这个错

<body>
<div id="app">
    <App></App>
</div>
<script src="vue.js"></script>
<script>
    //如果仅仅是实例化vue对象中 既有el 又有template,如果template中定义模板的内容
    // 那么template模板的优先级大于el
    //第一个参数是组件的名字,第二个参数 options参数 它是全局组件
    // <slot></slot>  slot是vue中提供的内容组件  它会去分发 内容
    Vue.component(VBtn,{
        data(){
            return {

            }
        },
        template:`<button>
            <slot></slot>

</button>`
    })

//    App   header Vaside  Vcontent
//    1.声子  Vue中 组件的名字 首字母要大写 跟标签区分 组件中的data必须是个函数 一定要有返回值
    let Vheader = {
        data(){
            return {

            }
        },
        //template定义模板的内容
//        Component template should contain exactly one root element
        template:`
            <div>
                <h2>日天</h2>
                <h2>日天</h2>
                <VBtn>登录</VBtn>
                <VBtn>注册</VBtn>
                <VBtn>按钮</VBtn>
                <VBtn>提交</VBtn>

            </div>
        `
    }
    let App = {
        data(){
            return {
               text:"我是日天"
            }

        },
        template:`
            <div id="a">
                <h2>{{ text }}</h2>
                <Vheader></Vheader>
                 <VBtn>删除</VBtn>
                 <br>
            </div>
        `,
        methods:{
        },
        components:{
            Vheader
        }
    }

    new Vue({
        el: #app,
        data() {
            return {
                msg:alex
            }
        },
        template:`<App />`,
        components:{
            //2.挂子
            //如果key和value一样 可以只写一个
            //App:App
            App
        }
    })

</script>
</body>

 

1、声明子

let App = {
    data(){
        return {
            
        }
    },
    template:`<div>
        
        
        </div>`
}

 

2.挂子

挂载哪个组件,这个组件就是我的父组件 template中的模板一定要有一个根元素

components:{
            # 键和值相同可简写 正常 App:App
            App
            Son
            ...
        }

 

3 用子

1 可在template 中使用  
template:`
            <App />    或者   <App></App>
        `,
2 没有template 可以在引用部分直接用
<div id="app">
    <App></App>    
</div>

 

3.组件的嵌套

数据:单向数据流

 

4.父子组件传值

父==》子

1.在子组件中 使用props声明 可以直接在子组件中任意使用

2.父组件 要定义自定义的属性

子==》父

1、子组件中 通过$emit()触发父组件中自定义的事件

2、父组件中声明自定义的事件介绍

 

5.平行组件传值

使用$on()和$emit() 绑定的是同一个实例化对象

A===>B组件传值

1、B组件中要使用$on(‘事件的名字’,function(){})

2、A组件中使用$emit(‘事件的名字‘,值)

 

以上是关于Vue 简单的总结二的主要内容,如果未能解决你的问题,请参考以下文章

vue+element ui项目总结点selectCascader级联选择器encodeURIdecodeURI转码解码一级mockjs用法路由懒加载三种方式

OpenGL基础学习之二代码基本结构

为什么二代测序的原始数据中会出现Read重复现象?

二代身份证号码编码规则

染色体基因芯片分析和第二代测序应用的区别

二代测序技术总结