标签：Vue 复习 app component value let template

一.单选题

二.多选题

三.填空题
1.@ :、2.span tag、3.v-show v-if、4.class style、5.is、6.deep、7.value、8.transition-group、9.to、10.then、11.vue create film、
12.点（“.”）、13.push、14.v-html、15.default

四.判断题

五.语法题

六.编程题

`

<div id="app">

    <char></char>

</div>

<script src="./js/vue.js"></script>

<script>
    // 创建组件
    Vue.component('char',{
        // 过滤器使用方法 在变量中使用 | 例{{变量 | 过滤器函数}} 传入即可
        // 考试可能只需要截取后 不需要截取前 这样写是为了演示对比效果
        // 一个标签时不需要外加div 写法：template:`<h1>{{str | jiequ}}</h1>`
        template:`
            <div>
                <h1>截取前：{{str}}</h1>
                <h1>截取后：{{str | jiequ}}</h1>
            </div>
        `,
        data(){
            return{
                str:"每天编程一小时大型IT公益活动"
            }
        },
        // 定义本地过滤器
        filters:{
            // 定义过滤函数
            jiequ:function (value) {
                // 判断传入字符长度是否大于9
                if(value.length>9)
                    // 是则截取 
                    return value.substring(0,9)+"……"
                // 否则直接返回原
                return value
            }
        }
        
    })

    let app=new Vue({
        el:"#app",
    })

</script>

<div id="app">

    <button @click="ts_comp='ht'">HTML</button>
    <button @click="ts_comp='css'">CSS</button>
    <button @click="ts_comp='js'">JavaScript</button>
    
    <!-- 通过内置组件 keep-alive 实现 -->
    <keep-alive>
        <!-- 绑定is属性 然后修改变量值为对应组件名即可 -->
        <component :is="ts_comp"></component>
    </keep-alive> 

</div>

<script src="./js/vue.js"></script>

<script>
    // 创建组件
    Vue.component('ht',{
        template:` <h1>HTML</h1> `
    })
    Vue.component('css',{
        template:` <h1>CSS</h1> `
    })
    Vue.component('js',{
        template:` <h1>JavaScript</h1> `
    })


    let app=new Vue({
        el:"#app",
        data:{
            ts_comp:'ht'
        }
    })

</script>

<div id="app">

    <!-- 定义子组件参数 -->
    <!-- 主要看 wd hg gai -->
    <!-- 通过绑定 props进行 传入url 宽 高  -->
    <!-- 通过自定义事件 gai 实现子到父传值 -->
    <son :img_src="url" :wd="w" :hg="h" @gai="set_img"></son>

</div>

<script src="./js/vue.js"></script>
<script>
    // 创建组件
    Vue.component('son',{
        // 接受参数
        props:['img_src','wd','hg'],
        // 模板设置
        template:` 
        <div>
            <button @click="big">图片放大</button>
            <button @click="small">图片缩小</button>
            <div :style="{width:wd+'px',height:hg+'px'}">
                <img :src="img_src" style="width:100%;">
            </div>
        </div>
        `,
        methods:{
            // 用 this.$emit 向父组件传入宽高

            // 放大函数
            big(){
                this.$emit('gai',[500,300])
            },
            // 缩小函数
            small(){
                this.$emit('gai',[200,100])
            }
        }
    })

    let app=new Vue({
        el:"#app",
        data:{
            url:'./img/img.jpg',
            w:200,
            h:100

        },
        methods:{
            // 自定义事件触发方法 然后修改变量以实现父向子传值
            set_img(value){
                // 第一个为宽
                this.w=value[0]
                // 第二个为高
                this.h=value[1]
            }
        }
    })

</script>

<div id="app">

    <nav>
        <!-- 路由入口 -->
        <router-link :to="{name:'home'}">首页</router-link>
        <router-link :to="{name:'about'}">关于</router-link>
    </nav>
    <!-- 路由视图 -->
    <router-view></router-view>
   
</div>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
    // 创建组件
    let Home={
        template:` <h1> 这是首页 </h1> `
    }
    let About={
        template:` <h1> 这是关于页面 </h1> ` 
    }

    // 创建路由对象
    let route = new VueRouter({
    // 配置路由
    routes: [
        {
            name: 'home',
            path: '/',
            component: Home
        },
        {
            name: 'about',
            path: '/about',
            component: About
        }
    ]
  });

    let app=new Vue({
        el:"#app",
        // 注册路由
        router:route
    })

</script>

`

标签：Vue,复习,app,component,value,let,template
来源： https://www.cnblogs.com/senzai/p/16415722.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。