72°

vue基础语法

一个简单的vue实例

1.进入vue官网:

https://cn.vuejs.org/v2/guide/installation.html

两种方法;1)点击开发版本,进入vue.js,复制到自己的文件夹,主页里引入2)直接引入cdn

注:<script src="js/vue.js"></script>放在head标签之间,避免抖屏。

<head>

<meta charset="utf-8"

<title>Vue入门</title>

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

<body>

&lt;div id="root"&gt;{{msg}}&lt;/div&gt;

&lt;script&gt;

        <span style="color: #0000ff;">new</span><span style="color: #000000;"> Vue({

                   el:</span>"#root"<span style="color: #000000;">,

                    data:{

                        msg:</span>"hello world"<span style="color: #000000;">

                    }

        })

</body> el: "id的值",//引用id的值,Vue通过el与属性值root进行绑定 msg:"输出值"可直接填写任意输出值

注意vue实例里不同属性用逗号隔开

2.挂载点,模板与实例之间的关系

挂载点:指的是Vue实例下中el属性对应的""中的id所对应的dom节点(div),即代码中el对应id的HTML标签

模板:指的是在挂载点内部的这些内容都称作模板内容,可以写在挂载点内部也可以写在实例里的template中

实例:即newVue中,Vue会结合模版和数据生成最终要展示的内容,然后把放在挂载点之中

3.vue实例中的数据,事件和方法

  1. {{number}}:插值表达式,也就是把number的值插入到h1之中;

  2. v-text="number":h1的内容由number这个变量决定,v-text是Vue中的一个指令,这个指令里面的东西跟着的是一个变量,它告诉h1显示的内容就是"number"这个变量;

  3. v-html="c ontent":v-html与v-text的区别是,v-html不会转义,而v-text会转译;

  4. v-on:click="handleClick":通过v-on给元素绑定一个Click事件,事件触发方法。

    v-on:click简写是@click
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="./vue.js"></script>
        <title>Vue入门</title>
    </head>
    <body>
        <div id="root">
            <div @click="handleClick">{{content}}</div>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                        content: "hello"
                },
                methods: {
                    handleClick: function() {
                    this.content = "world"
                    }
                }
            })
     </script>
     </body>
     </html>
    View Code

     

<body>
    <div id="root">
        <div @click="handleClick">{{content}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                    content: "hello"
            },
            methods: {
                handleClick: function() {
                this.content = "world"
                }
            }
        })
 </script>
 </body>
//点击hello变为world,
//{{content}}可以写为<div v-text="content"></div>
//new Vue中的this是指这个 Vue实例 ,指它自己

4.vue中的属性绑定和双向数据绑定

1)属性绑定

v-bind:title="title" ,双引号里面的是JS表达式,其中“”中的title指的是data里的title

2)双向绑定

单项绑定:数据决定页面的显示,但是页面无法决定数据的内容

v-model:双向数据绑定,随着数据的修改与之对应的也会修改。

//v-bind:title="title"可以缩写成,
:title="title"
//可以加入js表达式
v-bind:title="'gege lee'+title"





<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"> </script> </head> <body> <div id="root"> <div :title="'dell lee' +title">hello world</div> <input v-model="content"/> <div>{{content}}</div> </div> <script> new Vue({ el:"#root", data:{ title:"this is hello world", content:"this is content" } }) </script> </body> </html>

5.vue的计算属性和侦听器

1)计算属性(computed)

一个属性通过其他属性计算而来

计算属性 computed:{

fullName: function() {

return this.firstName + " " + this.lastName;

}

}

computed 有缓存的功能

2)侦听器(watch)

指的是监听某一个数据或计算属性发生了变化,然后就在监听器里面做业务逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>计算属性和侦听器</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        姓:<input v-model="firstName"/>
        名:<input v-model="lastName"/>
        <div>{{fullName}}
        </div>
        <div>{{count}}</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
           firstName:'',
           lastName:'',
           count:0
        },
        computed:{
            fullName:function(){
                return this.firstName+' '+this.lastName
            }
        }
        ,watch:{
            fullName:function(){
                this.count++
            }
    }
})
</span>&lt;/script&gt;

</body> </html>

6.v-if ,v-show,v-for指令

v-if:  控制dom的存在与否,对应data中的值show是true时显示,为false,则把这个标签就移除。

v-show  :控制dom的显示与否,v-show 只是切换display的一个属性,当对应指令值show为false时,div标签会隐藏,就会把div标签的display属性变成none,如果需要频繁的的切换标签展示状态,则用v-show

v-for :循环展示dom结构

用v-for去渲染li标签时,需要绑定一个key属性,这样会加快渲染的速度,可以直接用item来作为他的值,key值不能相同,所以如果内容是相同的就不能直接用内容作为key值了,可以直接用index作为key值。但是如果需要对列表进行排序的变更的话,也不能用index。
v-for="(item,index) of list":key="index"

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>v-if ,v-show,v-for指令</title>
    <script src="./vue.js">
    </script>
</head>
<body>
    <div id="root">
        <div v-show="show">hello world</div>
        <button @click="handleClick">toggle</button>
        <ul>
            <li v-for="(item,index) of list":key="index">{{item}}</li>
        </ul>
&lt;/div&gt;
&lt;script&gt;
    <span style="color: #0000ff;">new</span><span style="color: #000000;"> Vue({
        el:</span>"#root"<span style="color: #000000;">,
        data:{
            show:</span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
            list:[</span>1,2,3<span style="color: #000000;">]
        },
        methods:{
            handleClick:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">this</span>.show=!<span style="color: #0000ff;">this</span><span style="color: #000000;">.show;
            }
        }
    })
</span>&lt;/script&gt;

</body> </html>

 

本文转载自博客园,原文链接:https://www.cnblogs.com/tengteng0520/p/11349559.html

全部评论: 0

    我有话说: