Vue---基本知识

Posted chencn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue---基本知识相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- //基本变量 -->
        <p>{{message}}</p> <br>
        <hr>
        <!-- 绑定属性v-bind 简写： -->
        <p v-bind:title=‘title‘>Look at me,put mouse here</p> <br>
        <hr>
        <!-- 绑定事件v-on 简写@ -->
        <button v-on:click=‘reverseMessage‘>Click me</button> <br>
        <hr>

        <!-- 绑定条件v-if -->
        <p v-if=‘seen‘> Can you look at me?</p> <br>
        <button type="submit" @click=‘isShow‘ value="Click">Click</button> <br>
        <hr>
        <!-- 绑定循环v-for -->
        <ul>
            <li v-for=‘(book,index) in books‘ :key=‘index‘>
                {{index}}==========={{book.id}}======={{book.author}}========={{book.name}}</li>
        </ul>
        <br>
        <hr>
        <!-- 绑定函数methods function（）{} -->
        <button @click=‘deletebook‘>DEL</button> <br>
        <hr>
        <!-- input type=text   v-model绑定-->
        <input type="text" v-model=‘inputmessage‘>{{inputmessage}} <br>
        <!-- <input type="text" v-model.lazy=‘inputmessage‘>{{inputmessage}}  <br> -->
        <!-- <input type="text" v-model.trim=‘inputmessage‘>{{inputmessage}}  <br> -->
        <!-- <input type="text" v-model.number=‘inputmessage‘>{{inputmessage}}  <br>    
         不要用 -->
        <hr>
        <!-- input radio  v-model绑定 字符串或者数字属性 -->
        <input type="radio" v-model=‘radiomessage‘ value="Yes">YES <br>
        <input type="radio" v-model=‘radiomessage‘ value="No">NO <br>
        {{radiomessage}} <br>
        <hr>
        <!-- input chcekbox v-model 绑定 复选框   数组属性 -->
        <input type="checkbox" v-model=‘chcekmessage‘ value=‘a‘>A <br>
        <input type="checkbox" v-model=‘chcekmessage‘ value=‘b‘>B <br>
        <input type="checkbox" v-model=‘chcekmessage‘ value=‘c‘>C <br>
        {{chcekmessage}} <br>
        <hr>
        <!-- input textarea v-model 绑定文本信息 -->
        <textarea v-model=‘testareamessage‘></textarea> <br>
        {{testareamessage}} <br>
        <hr>
        <!-- input button  v-on 属性 简写@事件绑定 -->
        <input type="button" value=‘Click‘ @click=‘say("你好，中国")‘> <br>
        <hr>
        <!-- select option  v-model 属性 绑定基本类型属性   -->
        <select v-model=‘selectmessage‘>
            <option selected disabled value="">请选择</option>
            <option value="AA">A</option>
            <option value="BB">B</option>
            <option value="CC">C</option>
            <option value="DD">D</option>
        </select> <br>
        {{selectmessage}} <br>
        <hr>
        <!-- 插槽slot 组件插槽 绑定Vue.component(‘‘,{template:{},props:{}}) -->
        <!-- 父组件和子组件通信 v-bind 简写： props绑定 -->
        <!-- 子组件向父组件传值，子组件绑定事件，发送$emit(‘事件名称‘,传递参数),父组件监听事件‘事件名称‘,触发事件 -->
        <!-- 子组件向父组件传递多个值的时候，用arguments 来接住。 -->
        <!-- 子组件向父组件传递单个值的时候，可以直接用传递的参数名来接住 -->
        <app-view>
            <app-header slot=‘app-header‘ :header=‘message‘></app-header>
            <app-content slot=‘app-content‘ v-for=‘(book,index) in books‘ :key=‘index‘ :index=‘index‘ :book=book
                @subevent=‘sub(arguments)‘></app-content>
        </app-view>
    </div>
    <script>
        // 自定义组件，组件插槽    //  v-slot插槽 <slot name=""> slot=""    
        // template 中自定义组件不能作为根节点，要用其他标准标签包裹，在容器里。
        Vue.component(‘app-view‘, {
            template: `
                <div>
                    <slot name=‘app-header‘></slot>
                    <ul>
                    <slot name=‘app-content‘></slot>
                    </ul>
                </div>                
            `
        })
        Vue.component(‘app-header‘, {
            props: [‘header‘],
            template: ‘<div>{{header}}</div>‘
        })
        Vue.component(‘app-content‘, {
            props: [‘book‘, ‘index‘],
            template: `<li >
                {{index}}==========={{book.id}}======={{book.author}}========={{book.name}}=====
                <input type=‘submit‘ value="Alert"  @click=‘subclick‘/>
                </li>`,
                // template模板里 input标签定义子组件事件 点击事件 触发子组件方法。  
                // 子组件触发click事件通过$emit ==》发射==》 【事件名subevent 和参数值】 给父组件，父组件监听事件【事件名subevent】，触发事件函数sub(arguments)，调用父组件的方法。
            methods: {
                subclick: function () {
                    this.$emit(‘subevent‘, this.book, this.index, event);
                }
            }
        }
        )
        // 创建Vue对象 Vue对象的属性包括 el  data  methods   created  computed  mouted  watch 
        var vm = new Vue({
            // el  唯一最外层容器  document.getElementById #app  document.getElementByClassName  .app
            el: ‘#app‘,   
            data: {
                // 要绑定的属性 可以绑定到
                // {{}}、     v-bind标签属性class style id等      v-on(注意事件名称要小写)标签事件     v-model(修饰符.trim .lazy .number)表单值value  
                //  v-if 判断属性 控制标签的display:block  v-show 标签的创建和销毁.
                // v-for ul-li  ol-li  table-tr-td的标签的循环(item,index) in items  获取的(item,index)有顺序关系,                     
                message: ‘Hello,China.‘,
                title: ‘loading at‘ + new Date().toString(),
                seen: true,
                inputmessage: ‘‘,
                radiomessage: ‘‘,
                chcekmessage: [],
                selectmessage: ‘‘,
                testareamessage: ‘‘,
                books: [
                    { id: 1, author: ‘A‘, name: ‘Java‘ },
                    { id: 2, author: ‘B‘, name: ‘Python‘ },
                    { id: 3, author: ‘C‘, name: ‘C++‘ },
                    { id: 4, author: ‘D‘, name: ‘php‘ },
                    { id: 5, author: ‘E‘, name: ‘javascript‘ },
                ]
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split(‘‘).reverse().join(‘‘);
                },
                isShow: function () {
                    this.seen = !this.seen;
                },
                deletebook: function () {
                    this.books.pop();
                },
                say: function (message) {
                    alert(message);
                },
                sub: function (arguments) {

                    console.log(arguments[0].author, arguments[0].name, arguments[1], arguments[2]);
                    // console.log(arguments.book);?
                }
            }
        })

    </script>


</body>

</html>

 

以上是关于Vue---基本知识的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家