vue初体验

v-clock:

cloak 斗篷，在解析之前会遮住，即是， 在解析vue之前，有v-cloak 属性，解析会，没有v-cloak属性，很少用-

v-text:

显示文本，会覆盖，不灵活，很少用

v-html：

解析html标签格式

v-pre:

显示原文本，不会解析  跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

v-once:

固定最先值

v-for:

用法：

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-on:
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

v-bind:

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式, 语法糖写法 ‘：’

computed：计算属性



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <style>
        [v-cloak]{
            display: none;
        }
        .active{
            color: red;
        }
    </style>
</head>
<body>
<!-- cloak 斗篷，在解析之前会遮住，即是， 在解析vue之前，有v-cloak 属性，解析会，没有v-cloak属性，很少用-->
<div id = 'demo' v-cloak>
    <!-- 1、直接引用 mustache 语法-->
    <h2> {{msg + ', ' + msg3}}</h2>
    <h2> {{msg}},{{msg3}}</h2>
    <h2> {{msg}}</h2>
    <!-- v-text 显示文本，会覆盖，不灵活，很少用 -->
    <h2 v-text='msg'>家居</h2>
    <!-- v-pre 显示原文本，不会解析  跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。-->
    <h2 v-pre>{{msg}}</h2>

    <!--  v-for="item in list" 数组的引用-->
    <ul >
        <li v-for = "item in list">{{item}}</li>
    </ul>
    <!-- v-once 固定最先值-->
    <h2 v-once>最先数据：{{msg2}}</h2>
    <h2>当前数据：{{msg2}}</h2>
    <!-- 点击事件及方法,两种写法-->
    <button v-on:click = "add()">+</button>
    <button @click = "sub()">-</button>
    <!-- v-html 解析html标签格式 -->
    <h2 v-html='url'></h2>
    <!-- v-bind: 绑定元素 , : 语法糖写法-->
    <!-- v-bind 绑定class对象语法,键值对-->
    <!-- v-bind 绑定class数组-->
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href='aHref'>百度一下</a>
    <img :src="imgURL" alt="">
    <a :href='aHref'>百度一下</a>
    <h2 class='title' :class="{active: isActive, line: isLine}">你好呀</h2>
    <h2 class='title' :class="getClass()">你好呀</h2>
    <button @click = "colorB()">切换颜色</button>
    <!-- :style="{ 属性名: '属性值'}"      属性值要用单括号''包裹起来-->
    <h2 :style="{color : 'blue'}"> 加油</h2>
    <!-- 计算属性的简单运用-->
    <h2>{{fullName}}</h2>

    <!-- 计算属性的复杂运用-->
    <ul>
        <!-- {name,price} 显示为 数学 30元      (name,price) 显示为 { "name": "数学", "price": 30 } 0元-->
        <!--  一般数组用（） -->
        <li v-for = "{name,price} in books">{{name}} {{price}}元</li>
    </ul>
    <h2>{{totalPrice}}</h2>
</div>

<div id = ""></div>
</body>
<script src = "../js/vue.js"></script>
<!--<script src = "../js/vue-2.4.0.js"></script>-->
<script>

//    <!--const 常量，定义时必须赋值，常量的含义是指向的对象不能修改，但是对象内部的属性可以修改，
//      let 变量 -->
    const app = new Vue({
        <!--id容器#-->
        el: '#demo',
        data: {
            msg: '开始学习vue',
            msg2: 1,
            msg3: '加油',
            list: ['吴','李','赵'],
            url: '<a href="http://www.baidu.com">百度一下</a>',
            imgURL: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597120888045&di=95a62638090a9558b88fc9175578fe1b&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F007qCWkUly1ghmjmflp5aj30hs0a014r.jpg',
            aHref: 'http://www.baidu.com',
            isActive: true,
            isLine: true,
            firstName: 'li',
            lastName: 'ming',
            books: [
              {name: '数学', price: 30},
              {name: '语文', price: 31},
              {name: '英语', price: 32},
              {name: '物理', price: 33},
            ]


        },
//      计算属性 ，函数名为名词比较好
        computed: {
//            计算属性的get与1set方法，get方法与下面fullName 方法一致，一般只写get方法，所以用下面的简洁方法
//          fullName: {
//            get: function(){
//              return this.firstName + ' ' + this.lastName
//            },
//            set: function(newValue){
//              const  names = newValue.split(' ');
//              this.firstName = names[0];
//              this.lastName = names[1];
//            },
//          },
          fullName: function () {
            return this.firstName + ' ' + this.lastName
          },
          totalPrice: function () {
            let result = 0;
//            三种遍历数组方式
            for(let i = 0; i < this.books.length; i++){
              result += this.books[i].price
            }
//            for(let i in this.books){
//              result += this.books[i].price
//            }
//            for(let book of this.books){
//              result += book.price
//            }
            return result
          }

        },
        methods: {
//          方法
            add: function () {
                this.msg2++
            },
            sub: function () {
                this.msg2--
            },
            colorB: function () {
            this.isActive = !this.isActive
          },
            getClass: function () {
              return {active: this.isActive, line: this.isLine}
            }

        }

    })
</script>
</html>

posted @ 2020-08-21 21:05 CHUNYIN 阅读(131) 评论(0) 收藏举报

刷新页面返回顶部

CHUNYIN

vue初体验

公告