Vue基础语法
登录
标签搜索
侧边栏壁纸
博主昵称
蘇阿細

  • 累计撰写 389 篇文章
  • 累计收到 4 条评论
笔记 前端

Vue基础语法

suaxi
suaxi
2020-12-22 / 0 评论 / 66 阅读 / 正在检测是否收录...

Vue基础语法

1、Vue模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层  模板-->
<div id="app">
    
</div>

<script>
    var vm = new Vue({
       el: '#app',
        //model：数据
       data: {
          
       }
    });
</script>
</body>
</html>

2、else if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>else if</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层  模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        //model：数据
        data: {
            type: 'A'
        }
    });
</script>

</body>
</html>

2、for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层  模板-->
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    </li>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        //model：数据
        data: {
            items:[
                {message: '孙笑川'},
                {message: '刘波'},
                {message: 'Giao哥'}
            ]
        }
    });
</script>

</body>
</html>

4、事件绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    
<!--view层  模板-->
<div id="app">
    <button v-on:click="sayHello">点我</button>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        //model：数据
        data: {
            message: "Hello World"
        },
        methods:{ //方法必须定义在Vue的methods对象中,v-on:事件
            sayHello: function () {
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

5、双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层  模板-->
<div id="app">
    用户名：<input type="text" v-model="msg"> {{msg}}
    <br>
    文本框：<textarea name="text" id="" cols="30" rows="10" v-model="msg1"></textarea>{{msg1}}
    <br>
    性别：
    <input type="radio" name="sex" value="男" v-model="msg2"> 男
    <input type="radio" name="sex" value="女" v-model="msg2"> 女
    <span>选中的性别为：{{msg2}}</span>
    <br>
    选择城市：
    <select v-model="msg3">
        <option value="" disabled>--请选择--</option>
        <option >北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
    <span>{{msg3}}</span>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "",
            msg1: "",
            msg2: "",
            msg3: ""
        }
    });
</script>
</body>
</html>

6、组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层  模板-->
<div id="app">
    <!--组件：传递组件中的值：props-->
    <!--v-for遍历data中的值，v-bind绑定test01到item，接收遍历出来的值-->
    <test v-for="item in items" v-bind:test01="item"></test>
</div>

<script>

    //定义一个Vue组件component
    Vue.component("test",{
        props: ['test01'], //接收参数
        template: '<li>{{test01}}</li>' //模板
        }
    );
    var vm = new Vue({
        el: '#app',
        data: {
            items: ["孙笑川","刘波","Giao哥"]
        }
    });
</script>
</body>
</html>

7、vue-axios

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue-axios</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!--v-clock解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

<!--view层  模板-->
<div id="app" v-clock>
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">{{info.url}}</a>
    <div>{{info.page}}</div>
    <div>{{info.isNonProfit}}</div>
    <div>{{info.address.street}}</div>
    <div>{{info.address.city}}</div>
    <div>{{info.address.country}}</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data(){
          return{ //请求的返回参数格式必须和json字符串一样
              info:{
                  name: null,
                  url: null,
                  page: null,
                  isNonProfit: null,
                  address:{
                      street: null,
                      city: null,
                      country: null
                  },
                  links:[
                      {
                          name: null,
                          url: null
                      },
                      {
                          name: null,
                          url: null
                      },
                      {
                          name: null,
                          url: null
                      },
                  ]
              }
          }
        },
        mounted(){ //钩子函数 链式编程
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>
</body>
</html>

8、计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层  模板-->
<div id="app">
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        //model：数据
        data: {
            msg: "Hello"
        },
        methods: {
          currentTime1: function () {
              return Date.now(); //返回一个时间戳
          }
        },
        computed: { //计算属性，与mothods的方法名不能重名，如果重名，只会调用methods的方法
            currentTime2: function () {
                this.msg; //类似于Mybatis缓存，一旦涉及到增删改，虚拟DOM重新计算
                return Date.now(); //虚拟DOM
            }
        }
    });
</script>
</body>
</html>

9、插槽slot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot插槽</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层  模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>

<script>

    //slot插槽
    Vue.component("todo",{
        template:
            '<div>' +
                '<slot name="todo-title"></slot>'+
                '<ul>' +
                    '<slot name="todo-items"></slot>'+
                '</ul>'+
            '</div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
        el: '#app',
        data: {
            title: "科目",
            todoItems: ["Java","PHP","Vue"]
        }
    });
</script>
</body>
</html>

10、自定义事件内容分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件内容分发</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--view层  模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item"
                    v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

<script>

    //slot插槽
    Vue.component("todo",{
        template:
            '<div>' +
            '<slot name="todo-title"></slot>'+
            '<ul>' +
            '<slot name="todo-items"></slot>'+
            '</ul>'+
            '</div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props: ['item','index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}--{{item}}&nbsp;<button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                //自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el: '#app',
        data: {
            title: "科目",
            todoItems: ["Java","PHP","Vue"]
        },
        methods: {
            removeItems: function (index) {
                console.log("删除"+this.todoItems[index]+"成功！");
                this.todoItems.splice(index,1); //一次删除一个元素
            }
        }
    });
</script>
</body>
</html>
0
Vue前端node.js
版权属于： suaxi
本文链接： https://wangchouchou.com/281.html
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

评论 (0)

取消