Vue.js基础语法-新手入门教程

最新推荐文章于 2023-08-12 11:58:00 发布

X ゜

最新推荐文章于 2023-08-12 11:58:00 发布

阅读量298

点赞数 1

分类专栏： Vue 文章标签： vue javascript js java node.js

本文链接：https://blog.csdn.net/weixin_44625302/article/details/108010492

版权

Vue 专栏收录该内容

12 篇文章 5 订阅

订阅专栏

1、变量引用

变量在网页中的引用是声明式的、动态的，就算编译解析阶段变量不存在也不会影响网页美观、更不会报错(因为引用只是被当作声明)，而只要运行期间发现网页引用是确有变量、确有其值，就会实时对网页进行更新！(底层原理是事件监听)

<script>
    let vue = new Vue({						
        el:'#demo',
        data: {
            message: "aaa"			 		
        }
    });
</script>

(1). 普通文本
将变量解析为普通文本，语法：{{变量名}}

<span>{{ message }}</span>

(2). 网页文本
将变量解析为HTML文本，语法：<..v-html="变量名">

<span v-html="message"></span>

(3). 标签属性–属性值

将变量解析为标签属性值，语法：<.. v-bind:xxx="变量名"> 或 <.. :xxx="变量名">

<div v-bind:id="message"></div>
<h1 v-bind:title="message">鼠标悬浮显示信息</h1>

注意：对于布尔值，只要变量存在就意味着值为 true
(3). 标签属性–属性名
将变量解析为标签属性名，语法：<.. v-bind:[变量名]=""> 或 <.. :[变量名]="">

<a v-on:[eventName]="doSomething"> ... </a>

2、算术运算

变量赋值时可以进行表达式运算！但运算结果只能是一个值，而不能是代码

{{ (number + 1)*2/3%8 }}						<!--加减乘除...-->

{{ ok ? 'YES' : 'NO' }}							<!--三目运算-->

{{ message.split('').reverse().join('') }}		<!--JS 函数调用-->

<div v-bind:id="'list-' + message">
    	{{ message.split('').reverse().join('') }}
</div>

3、流程控制

1. if 指令
v-if="布尔表达式"，如果布尔表达式为真，则输出当前/所属的标签

<div id="demo">
    <p v-if="score >= 90">成绩卓越！</p>
    <p v-else-if="score >= 80">成绩优秀！</p>
    <p v-else-if="score >= 60">成绩良好！</p>
    <p v-else>继续努力！</p>
</div>

2. for 指令
v-for="a in aaa"，每次迭代都会输出一次当前/所属标签

v-for="(a,i) in aaa"，每次迭代都会输出一次当前标签，第二个变量名i 指当前迭代次数

<body>
<div id="demo">
    <li v-for="obj in items">{{ obj.atr }}</li>
</div>
</body>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // 2、View-Model 视图模型层
    let vue = new Vue({
        el:'#demo',                     // 关键点：定位元素
        data: {                         // 关键点：定义数据
            // 数组变量：该数组的元素为对象
            items: [
                {atr: '一号元素'},
                {atr: '二号元素'},
                {atr: '三号元素'},
                {atr: '四号元素'}
            ]
        }
    });
    // 3、Model层：Restful返回....
</script>

4、反向绑定

语法：v-model="变量名"，指所在标签的值一旦变化后，该值就会更新变量(赋值)
例子文本框值→message

<body>
<div id="demo">
    文本：<input type=text" v-model="message">
    <hr>
    {{ message }}
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let vue = new Vue({
        el:'#demo',                     // 定位元素
        data: {                         // 定义变量
            message:''
        }
    });
</script>

单选按钮值→message

<div id="demo">
    性别：
    <input type="radio" name="gender" value="男" v-model="message">男
    <input type="radio" name="gender" value="女" v-model="message">女
    <hr>
    你选定的性别为：{{ message }}
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let vue = new Vue({
        el:'#demo',                     // 定位元素
        data: {                         // 定义变量
            message:''
        }
    });
</script>

5、计算属性

在网页中加入过多的算术运算会使维护变得困难，因为你可能需要思考很多才知道表达式的作用，于是Vue提供了计算属性。

计算属性，指与函数返回值绑定的变量！
核心语法

computed: {
	reversedMessage: function () {						// 变量名(计算属性)
		return this.message.split('').reverse().join('')
  }
}

注意：如果函数内引用了其他组件变量，比如：this.message，则message改变时将触发赋值函数重新执行；在重新执行函数之前，计算属性的值总是固定的！(存在内存)

<body>
<div id="demo" v-clock>
    var_1：{{ var_1 }}
    <hr>
    var_2：{{ var_2() }}
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let vue = new Vue({
        el: "#demo",
        computed: { // 计算属性(固定)
            var_1: function (){
                return Date.now();
            }
        },
        methods: {
            var_2: function () {
                return Date.now();
            }
        }
        //computed: { // 计算属性(半动态)
        //    var_1: function (){
        //        this.message;
        //        return Date.now();
        //    }
        //}
    });
</script>

6、事件监听

阻止事件冒泡(额外为el-menu定义的事件不能阻止，会报错)

A：return false —>In event handler ,prevents default behavior and event bubbing 。
return false 在事件的处理中，可以阻止默认事件和冒泡事件。
B：event.preventDefault()—> In event handler ,prevent default event (allows bubbling) 。
event.preventDefault()在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。
C：event.stopPropagation()—> In event handler ,prevent bubbling (allows default behavior).
event.stopPropagation()在事件的处理中，可以阻止冒泡但是允许默认事件的发生。

<body>
<div id="demo">
    <!-- 2、注册一个监听点击事件的被回调函数 -->
    <button v-on:click="say">点击</button>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let vue = new Vue({
        el:'#demo',                     // el	定位元素
        data: {                         // data	定义变量
            message: '你点了我！'
        },
        // 1、编写事件
        methods: {
            say: function(){
                alert(this.message);
            }
        }
    });
</script>

watch
监听处理函数：当每次监听变量值发生改变时，执行同名函数

  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // ...
    }
  }

7、元素操作

原生操作

document.getElementsByClassName('title-color')[0].style.color = val

$refs操作

// 前提：基本HTML普通元素添加了`ref="xxx"`属性
this.$refs.titleNameRef.style.color = val

双向绑定

编写vue变量
网页反向绑定vue变量
网页引用变量、网页引用变量、网页引用变量…

X ゜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录