vue 知识点测试dome代码

最新推荐文章于 2022-06-23 10:33:55 发布

热爱技术的小陈

最新推荐文章于 2022-06-23 10:33:55 发布

阅读量209

点赞数

分类专栏： vue+nodejs

本文链接：https://blog.csdn.net/weixin_44371237/article/details/111640049

版权

vue+nodejs 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

本文通过一个完整的Vue.js代码示例，详细讲解了Vue.js的基本语法和特性，包括行内绑定、v-text、v-bind、v-html、v-if/v-show、事件监听、v-model、v-for、计算属性、组件和插槽的使用。通过这个实例，读者可以深入理解Vue.js的运作机制，并掌握如何在实际项目中应用。

摘要由CSDN通过智能技术生成

源码地址 https://gitee.com/chenxb666/java/tree/master/vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{ div }}</div>
    <div v-text="vtext"></div>
    <div v-bind:title="vbind">鼠标悬停几秒钟查看此处动态绑定的提示信息！</div>
    <div :title="vbind">v-bind 缩写，鼠标悬停几秒钟查看此处动态绑定的提示信息</div>
    <div v-html="vhtml"></div>
    <div v-if="vif">v-if显示隐藏</div>
    <div v-show="vshow">v-show显示隐藏</div>
    <div>{{message}}</div>
    <div>{{reversedMessage}}</div>
    <div>{{now}}</div>
    <div>
        <button v-on:click="alert">点击</button>
    </div>
    <input v-on:keyup.enter="enter" placeholder="测试监听enter">
    <div>
        {{vmodel}}
        <input v-model="vmodel" placeholder="测试v-model">
    </div>
    <div>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>
    <div>
        <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>
    </div>
    <div>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>
    <div>
        单选
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <div>
        多选
        <select v-model="selectedMulti" multiple>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selectedMulti }}</span>
    </div>
    <div>
        用 v-for 渲染的动态选项：
        <select v-model="selectedFor">
            <option v-for="option in optionsFor" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selectedFor }}</span>
    </div>
    <div>
        .trim
        过滤首尾空白字符
        <input v-model.trim="message">
    </div>
    <div>
        .lazy
        change 事件之后同步
        <input v-model.lazy="message">
    </div>
    <!--    组件-->
    <div>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <div>
        <blog-post title="向组件传递的标题">插槽分发内容</blog-post>
    </div>
</div>
<script>
    //组件
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">测试组件 {{ count }}</button>'
    })
    Vue.component('blog-post', {
        props: ['title'],
        template: '<div><h3 style="color:red">{{ title }}</h3><h3>每个组件只有一个根元素</h3><slot></slot></div>'
    })
    // //路由
    // const Home = { template: '<p>home page</p>' }
    // const About = { template: '<p>about page</p>' }
    // const routes = {
    //     '/': Home,
    //     '/about': About
    // }
    new Vue({
        el: '#app',
        data: {
            div: '测试行内绑定',
            vtext: '测试v-text',
            vbind: '测试v-bind',
            vhtml: '<div style="color:#ff0000">vhtml插入HTML</div>',
            vif: true,
            vshow: false,
            message: 'hello',
            vmodel: '',
            checked: false,
            checkedNames: [],
            picked: '',
            selected: '',
            selectedMulti: [],
            selectedFor: 'A',
            optionsFor: [
                {text: 'One', value: 'One'},
                {text: 'Two', value: 'Two'},
                {text: 'Three', value: 'Three'}
            ],
            currentRoute: window.location.pathname//路由
        },
        computed: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            },
            now: function () {
                return "测试computed缓存" + Date.now()
            },
            // ViewComponent () {//路由
            //     return routes[this.currentRoute] || NotFound
            // },
            // render (h) { return h(this.ViewComponent) }
        },
        methods: {
            alert() {
                alert("测试v-on")
            },
            enter() {
                alert("测试监听enter")
            }
        },
    })

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

热爱技术的小陈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue 知识点测试dome代码

源码地址 https://gitee.com/chenxb666/java/tree/master/vue<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></sc
复制链接

扫一扫

专栏目录