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>

    <div id="root">{{msg}}</div>

    <script>

            new Vue({

                       el:"#root",

                        data:{

                            msg:"hello world"

                        }

            })

</body>
el: "id的值",//引用id的值，Vue通过el与属性值root进行绑定

msg:"输出值"可直接填写任意输出值

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

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

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

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

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

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

{{number}}：插值表达式，也就是把number的值插入到h1之中；
v-text="number"：h1的内容由number这个变量决定，v-text是Vue中的一个指令，这个指令里面的东西跟着的是一个变量，它告诉h1显示的内容就是"number"这个变量；
v-html="c ontent"：v-html与v-text的区别是，v-html不会转义，而v-text会转译；

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++
            }

        }
    })
    </script>
    
</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>

    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                show:true,
                list:[1,2,3]
            },
            methods:{
                handleClick:function(){
                    this.show=!this.show;
                }
            }
        })
    </script>
</body>
</html>

原文地址：https://www.cnblogs.com/tengteng0520/p/11349559.html