Vue学习

Posted 2021-01-02 zzr-stdio

tags:

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

Vue学习

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件.

Vue.js安装

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>

Vue.js起步

每个Vue应用都需要通过实例化Vue来实现.
语法格式如下:

var app = new Vue({
    //选项
})

实例:

 <div id="app">
            <h1>site:{{site}}</h1>
            <h1>url:{{url}}</h1>
            <h1>{{details()}}</h1>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            site: '我的',
            url: 'www.baidu.com',
        },
        methods: {
            details: function(){
                return "hello world";
            }
        }
    })
</script>

可以看到在Vue构造器中有一个el参数,它是DOM元素中的id.在上面实例中id为app.在div元素中.
这意味着我们接下来的改动全部在指定的div内.div外部不受影响.
data用于定义属性,实例中有属性:site,url.
methods用于定义函数,可以通过return来返回函数.
{{}}用于输出对象属性和函数返回值.

Vue.js模板语法

插值

文本

数据绑定最常见的形式就是使用{{}}的文本插值:
文本插值

<div id="app">
    {{message}}
</div>

html
使用v-html指令用于输出html代码:
v-html指令

<div v-html="html">

</div>
var app = new Vue({
            el: "#app",
            data: {
                site: '我的',
                url: 'www.baidu.com',
                html:"<h1 style='color: red;'>这是v-html内容</h1>"
            },
            methods: {
                details: function(){
                    return "hello world";
                }
            }
        })

属性
HTML属性中的值应使用v-bind指令.
以下实例判断class1的值,如果为true使用class1类的样式.否则不使用该类:

<style>
        .wo {
            color: red;
        }
        .ni {
            color: blue;
        }
    </style>
     <div id="app">
            <div v-bind:class="{'wo':wo, 'ni': !wo}">
                <p>测试v-bind</p>
            </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                wo: true
            },
        })
    </script>

表达式
表达式实例:

<div id="app">
        <div>{{10 + 10}}</div>
        <div>{{ok ? '海' : '唐'}}</div>
        <div>{{message.split('').reverse().join('')}}</div>
        <div v-bind:id="'list-' + id">才子</div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello world",
                id: 110,
                ok: true
            },
        })
    </script>

指令
指令是带有v-前缀的特殊属性.
指令用于在表达式的值改变时,将某些行为应用到DOM上.如下例子:

<div id="app">
        <div v-if="wo">这是现实</div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
               wo: true
            },
        })
    </script>

参数
参数在指令后以冒号指明.例如,v-bind指令被用来响应地更新HTML属性.

<div id="app">
        <a v-bind:href="url">教程</a>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
               url: "http://www.baidu.com"
            },
        })
    </script>

另一个例子是v-on指令,它用于监听DOM事件:

<a v-on:click="doSome">

修饰符
修饰符是以半角句号,指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.例如,.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault():

<form v-on:submit.prevent="onSubmit"></form>

用户输入
在input输入框中我们可以使用v-model指令来实现双向数据绑定:

 <div id="app">
        <a v-bind:href="url">教程</a>
        <input v-model="wo">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
               url: "http://www.baidu.com",
               wo: "test"
            },
        })
    </script>

按钮的事件可以使用v-on监听事件,并对用户的输入进行响应.

<div id="app">
        <input v-model="wo">
        <button v-on:click="click">很好</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
               url: "http://www.baidu.com",
               wo: "test"
            },
            methods: {
                click: function(){
                    this.wo = "我们";
                }
            }
        })
    </script>

过滤器
Vue.js允许你自定义过滤器,被用作一些常见的文本格式化.由"管道符"指示,格式如下:

<div id="app">
        <div>{{message|cap}}</div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
              message: 'hai'
            },
            methods: {
                
            },
            filters:{
                cap: function(value){
                    if(!value) return '';
                    value = value.toString();
                    return value.charAt(0).toUpperCase() + value.slice(1);
                }
            }
        })
    </script>

缩写
v-bind缩写

<a v-bind:href="url"></a>

<a :href="url"></a>

v-on缩写

<a v-on:click="doSome"></a>

<a @click="doSome"></a>

循环语句

循环使用v-for指令.
v-for指令需要以site in sites形式的特殊语法,sites是元数据数组并且site是数组元素迭代的别名.
v-for可以绑定数据到数组来渲染一个列表.

<div id="app">
       <ol>
           <li v-for="site in sites">
               {{site.name}}
           </li>
       </ol>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
              sites: [
                  {"name":"第一个"},
                  {"name":"第二个"},
                  {"name":"第三个"}
              ]
            },
   
        })
    </script>

可以提供第二个的参数为键名:

<div id="app">
       <ul>
           <li v-for="(site, key) in sites">
               {{key}} {{site.name}}
           </li>
       </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
              sites: [
                  {"name":"第一个"},
                  {"name":"第二个"},
                  {"name":"第三个"}
              ]
            },
   
        })
    </script>

第三个参数为索引:

 <div id="app">
       <ul>
           <li v-for="(site, key, index) in sites">
               {{key}} {{site}} {{index}}
           </li>
       </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
              sites: {"one":"第一", "two": "第二", "th": "TH"}
            },
   
        })
    </script>

v-for迭代整数

<div id="app">
       <ul>
           <li v-for="it in 10">
               {{it}}
            </li>
       </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
              sites: {"one":"第一", "two": "第二", "th": "TH"}
            },
   
        })
    </script>

v-for循环数组:

<div id="app">
       <ul>
           <li v-for="it in [10, 20, 30]">
               {{it}}
            </li>
       </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
              sites: {"one":"第一", "two": "第二", "th": "TH"}
            },
   
        })
    </script>

Vue.js计算属性

计算属性关键字:computed.
计算属性在处理一些复杂逻辑时是很有用的.
可以看下以下反转字符串的列子:

<div id="app">
      <p>原始字符串:{{message}}</p>
      <p>计算后反转字符串:{{reversedMessage}}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Runoob"
            },
            computed: {
                reversedMessage: function(){
                    return this.message.split('').reverse().join('');
                }
            }
        })
    </script>

Vue.js组件

注册一个全局组件语法格式如下:

Vue.component(tagName, options)

tagName为组件名,options为配置选项.注册后,我们可以使用以下方式来调用组件:

<tagName></tagName>

全局组件

 <div id="app">
        <wo></wo>
    </div>
    <script>
        Vue.component("wo", {
            template: '<h1>这是自定义组件</h1>'
        });
        var app = new Vue({
            el: "#app",
        })
    </script>

局部组件

<div id="app">
        <wo></wo>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            components: {
                'wo': {
                    template: '<h1>这是自定义</h1>'
                }
            }
        })
    </script>

Prop
prop是父组件用来传递数据的一个自定义属性.
父组件的数据需要通过props把数据传给子组件,子组件需要显式地使用props选项声明"prop":

<div id="app">
        <wo message="这是传参"></wo>
    </div>
    <script>
        Vue.component("wo", {
            template: '<h1>这是自定义组件{{message}}</h1>',
            props:['message']
        
        });
        var app = new Vue({
            el: "#app",
        })
    </script>

动态Prop
类似于用v-bind绑定HTML特性到一个表达式,也可以用v-bind动态绑定props的值到父组件的数据中.每当父组件的数据变化时,该变化也会传导给子组件:

<div id="app">
        <wo v-bind:message="message"></wo>
    </div>
    <script>
        Vue.component("wo", {
            template: '<h1>这是自定义组件{{message}}</h1>',
            props:['message']
        
        });
        var app = new Vue({
            el: "#app",
            data: {
                message: "消息"
            }
        })
    </script>

以上是关于Vue学习的主要内容，如果未能解决你的问题，请参考以下文章

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

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

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

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