Javaweb学习笔记day03---Vue

最新推荐文章于 2024-04-01 14:42:43 发布

Mr.W.code

最新推荐文章于 2024-04-01 14:42:43 发布

阅读量574

点赞数

分类专栏：笔记 sql java 文章标签： java exception debug

本文链接：https://blog.csdn.net/Wynb1020/article/details/121633674

版权

Vue

Vue介绍

概述
一个前端框架，用于将数据渲染到页面展示

Vue快速入门

开发步骤
- ①引入vue的脚本库文件
- ②声明一个div容器(Vue容器)，id=app
- ③创建Vue对象，并和div容器绑定
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门案例</title>
</head>
<body>

<!--②声明一个div容器，id=app-->
<div id="app">
    <!--插值表达式-->
    {
  {msg}}
</div>

</body>
<!--①引入vue的脚本库文件-->
<script src="js/vue.js"></script>
<!--③创建Vue对象，并和div容器绑定-->
<script>

    var vue = new Vue({
     
        el: "#app",
        data: {
     
            msg: "helloworld"
        }
    });

</script>
</html>

Vue入门案例

语法

			<script>
			
		    //创建vue对象
		    var vue = new Vue({
		        el: "id选择器",//绑定vue容器
		        data: {//声明变量
		            变量名: 值,
		            变量名2:值2,
		            ...
		        },
		        methods:{//声明函数
		            函数名(形参列表){
		                功能代码;
		                return 结果;
		            },
		            函数名2(形参列表){
		                功能代码;
		                return 结果;
		            }
		        },
		        watch:{
		            
		        },
		        //钩子函数...
		    });
		
		</script>

Vue指令介绍

概述
- 是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
常用指令
- v-html、v-bind、v-if、v-show、v-for、v-on、v-model

Vue文本操作

概述
- 使用v-html和v-text指令，和innerHTML/innerText类似
v-html
- 添加文本，会解析html标签
v-text
- 添加文本，不会解析html标签
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue文本操作</title>
</head>
<body>
<!--②声明Vue容器-->
<div id="app">
    <span v-html="msg"></span><br>
    <span v-text="msg"></span><br>
    <span>{
  {msg}}</span><br>