Vue简单入门及案例

最新推荐文章于 2023-10-16 12:32:14 发布

真羡慕啊！

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量1.7k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_54605990/article/details/116199064

版权

VUE入门

简介：

JavaScript框架
简化Dom操作
响应式数据驱动

之前基于DOM----->（1）获取DOM元素（2）操作DOM元素

Vue官网： https://cn.vuejs.org

Vue.js的优点

体积小

压缩后33K
更高的运行效率

基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM
双向数据绑定

让开发者不用再去操作DOM对象，将更多精力投放到业务逻辑上；
生态丰富、学习成本低

市场上有用大量成熟，稳定的vue.js的ui框架、常用组件，即用实现快速开发

使用场景广泛：譬如 web端，移动端，跨平台应用开发

一、vue第一个程序hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--①引入vue的库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<!--②创建一个双标签并为该标签定义一个id-->
<div id="add">
    <!--显示数据-->
    {
  {message}}
</div>
</body>
<!--创建自己的js代码-->
<script>
    /*创建一个Vue对象*/
    const app = new Vue({
    
        el: "#add",
        data:{
    
            //数据
            message:"今天是周一......"
        }
    })
</script>
</html>

二、el挂载点

挂载点:(1)作用范围:该标签内或者子标签内
挂载点:(2)一定使用id选择器?,可以使用其他选择器,但是建议使用id选择器，因为		   id具有唯一性
挂载点:(3)挂载点一定使用div标签吗?可以使用其他标签，但是必须双标签。不能在		  body和html标签上，建议挂载到div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--①引入vue的库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<!--②创建一个双标签并为该标签定义一个id-->
{
  {message}}
<div id="add">
    {
  {message}}
</div>

<!--测试class选择器-->
<!--<div class="add">
    {
   {message}}
</div>-->

</body>

<!--创建自己的js代码-->
<script>
    /*创建一个Vue对象*/
    const app = new Vue({
    
        /*el挂载点*/
        el: "#add",
        data: {
    
            //挂载点:(1)作用范围:该标签内或者子标签内
            //挂载点:(2)一定使用id选择器?,可以使用其他选择器,但是建议使用id选择器，因为id具有唯一性
            //挂载点:(3)挂载点一定使用div标签吗?可以使用其他标签，但是必须双标签。不能在body和html标签上，建议挂载到div标签
            message: "明天是周二......"
        }
    })
</script>
</html>

三、data数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="add">
    {
  {message}}</br>
    <span>{
  {message}}</span></br>
    {
  {person}}</br>
    {
  {person.name}}-------->{
  {person.age}}<br>
    <ul>
        <li>{
  {list[0].school}}</li>
        <li>{
  {list[1].school}}</li>
        <li>{
  {list[2].school}}</li>
    </ul>
</div>
</body>
<script>
    const app= new Vue({
    
        el:"#add",
        //数据标志
        data:{
    
            //基本数据类型和字符串
            message:"今天老白来了....",
            //对象
            person:{
    
                name:"张三",
                age:3
            },
            //集合
            list:[
                {
    school:"五道口"},
                {
    school:"南开"},
                {
    school:"北大"}
            ]
        }
    })
</script>
</html>

四、Vue指令

v-text v-html v-on基础

v-show v-if v-bind

v-for v-on补充 v-model

通过Vue实现常见的王爷效果
学习Vue指令，一案例巩固知识点
Vue指令指的是以v-开头的一组特殊语法

4.1 v-text 设置标签的文本值（textContent）

v-text指令的作用是：设置标签的内容（textContent）
默认写法会替换全部内容，使用差值表达式{ {}}可以替换指定内容
内部支持写表达式

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="add">
    <span v-text="message+'，天气不好影响心情！'">冬冬</span><br>
    <span>{
  {message+"嘿呀"}}</span>
</div>
</body>
<script>
    const app= new Vue({
    
        el:"#add",
        //数据标志
        data:{
    
            message:"一周的阴天和雨天..."
        }
    })
</script>
</html>

4.2v-html：设置标签的innerHTML

内容中有html结构会被解析为标签

特点：

v-html 指令的作用是设置标签的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <!--引入vue库-->
    <script src="./js/vue.js"></script>
</head>

最低0.47元/天解锁文章

真羡慕啊！

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Vue简单入门及案例

VUE入门简介：JavaScript框架简化Dom操作响应式数据驱动之前基于DOM----->（1）获取DOM元素（2）操作DOM元素Vue官网： https://cn.vuejs.orgVue.js的优点体积小压缩后33K更高的运行效率基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM双向数据绑定让开发者不用再去操作D
复制链接

扫一扫

专栏目录