Vue---01

最新推荐文章于 2024-04-19 16:13:07 发布
最新推荐文章于 2024-04-19 16:13:07 发布
阅读量167 收藏
点赞数
分类专栏： web 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Echouuu/article/details/103770885
版权
Vue
  • 什么是vue
    vue是一种规范，是mvvm模型，基于双向绑定的前端框架；数据改变，页面就变；页面改变，数据就变。
  • ECMAScript6
    ES6声明变量的方式:
    1.var 声明全局变量；
    2.let 声明的变量只在该代码块中有效；
    3.const 声明常量 一旦赋值不能更改。
  • 解构表达式
 var arr=[1,5,4];
        //解构数组
        var [a,b,c] =arr;
        console.log(a,b,c)
        //解构对象
        var stu={
            name:"洪七公",
            age:42
        }
        var{name,age}=stu;
        console.debug(name,age)
  • 箭头函数
    箭头函数this是和当前创建环境的this是一致的
    如果箭头函数外面还有函数，那么箭头函数中的this是和外层函数的this是一致的；如果没有，this就指向window。
 var stu={
           name:"周董鱼",
           age:25,
           //方式一
           skill:function () {
               console.debug(this.name+this.age)
           },
           //方式二 箭头函数
           skill2:()=> {//箭头函数this是和当前创建环境的this是一致的；
                        // 如果箭头函数外面还有函数this就和外层函数的this一致，如果没有就指向window
               console.debug("指向window")
           },
           //方式三
           skill3(){
               console.debug("简写方式")
           }
       }
       //调用方法
        stu.skill();
        stu.skill2();
        stu.skill3();
hello_vue

使用vue需要引入vue核心库,引入之后会有一个内置对象vue；
{{}} ：胡须表达式用来取值；
el：主要用来挂载指定的dom，
可以挂载的选择器：
id选择器 “#id名”
类型选择器 “.class名”
标签选择器 “标签名”
一般使用id选择器,因为id是唯一的
data：里面准备数据
methods：里面写vue实例的所有方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <div id="god">
        {{msg}}
        <span>{{msg}}</span>
        --{{person}}--{{person.name}}--{{hello()}}
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的 一般都挂载id选择器 */
        el:"#god",//挂载类型选择器(.god),挂载标签(div)
        /*data准备的数据*/
        data:{
            msg:"洪七公",
            person:{
                name:"王天霸",
                age:22,
                sex:"男"
            },
        },
        methods:{//vue实例中的方法都放在methods中
            hello(){
                return "王老五"
            }
        }
    });
</script>
</html>
  • 算术表达式
    可以 +、-、*、/、%
    在vue中三目运算表示false的有6个：false、NaN、null、""、0、undefined
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <div id="god">
        {{num}}+{{num1}}={{num+num1}}<!-- + - * / % -->
        num+num1={{num+num1}}

        <!--三目运算 默认为false的有 false，NaN，null，undefined，"",0-->
        {{sex?"男":"女"}}
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的标签 一般都挂载id选择器 */
        el:"#god",//挂载类型选择器(.god),挂载标签(div)
        /*data准备的数据*/
        data:{
           num:5,
           num1:4,
           sex:""
        }
    });

</script>
</html>
  • 操作字符串
    胡须表达式可以调用对应类型的方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <div id="god">
        <!--胡须表达式可以调用对等类型的方法-->
        {{str}}<br/>{{str.length}}<br/>{{str.substring(0,2)}}<br/>{{str.substr(0,4)}}
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的标签 一般都挂载id选择器 */
        el:"#god",//挂载类型选择器(.god),挂载标签(div)
        /*data准备的数据*/
        data:{
           str:"雷公电母，听我号令"
        }
    });
</script>
</html>
Vue指令
  • v-text&v-html
    v-text：在指定的标签进行设置值，如果你设置的代码有html代码，它只会当成一个纯文本进行展示;类似于js中的innerText;
    v-html：在指定的标签进行设置值，如果你设置的代码有html代码，它是能被浏览器所解析的 类似于js中的innerHTML;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <div id="god">
        <span v-text="text">text</span><!--里面的内容都会被覆盖-->
        <span v-html="html">html</span>
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的标签 一般都挂载id选择器 */
        el:"#god",//挂载类型选择器(.god),挂载标签(div)
        /*data准备的数据*/
        data:{
           text:"<h1>内容全部以纯文本的方式展示</h1>",
           html:"<h1 style='color: red'>内容会渲染之后进行展示</h1>"
        }
    });
</script>
</html>
  • v-if—判断
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <!--
        v-if 判断
    -->
    <div id="god">
        <span style="color: red" v-if="age>30&&age<60">中年</span>
        <span style="color: deepskyblue" v-else-if="age<30&&age>18">青年</span>
        <span style="color: deeppink" v-else-if="age<18">未成年</span>
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的标签 一般都挂载id选择器 */
        el:"#god",//挂载类型选择器(.god),挂载标签(div)
        /*data准备的数据*/
        data:{
            age:1,
        }
    });
</script>
</html>
  • v-for–循环迭代
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <div id="god">
        <span v-for="v in num">{{v}}</span>
        <ul>
            <li v-for="v in msg">{{v}}</li>
            <li v-for="(v,i) in arr">{{v}}---索引{{i}}</li>
        </ul>
        <select>
            <!--v是取里面的值  k是取对应的key i是取对应的索引-->
            <option v-for="(v,k,i) in person">值：{{v}}--key：{{k}}---索引：{{i}}</option>
        </select>
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的标签*/
        el:"#god",
        /*data准备的数据*/
        data:{
            num:10,
            msg:"洪七公",
            arr:["a","b","c"],
            person:{
                name:"王天霸",
                age:22,
                sex:"男"
            },
        }
    });
</script>
</html
  • v-bind—绑定属性
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <div id="god">
        <!--原生方式获取图片-->
        <img src="img/1.jpg" width="100%" height="100%" alt="图片不存在"/>
        <!--①使用v-bind 来绑定属性加载图片-->
        <img v-bind:src="src" v-bind:width="width" v-bind:height="height" v-bind:alt="alt">
        <!--②简写方式-->
        <img :src="src" :width="width" :height="height" :alt="alt">
        <!--③直接绑定对象-->
        <img v-bind="option">
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的标签 一般都挂载id选择器 */
        el:"#god",//挂载类型选择器(.god),挂载标签(div)
        /*data准备的数据*/
        data:{
            src:"img/1.jpg",
            width:"100%",
            height:"100%",
            alt:"图片不存在",
            option:{
                src:"img/1.jpg",
                width:"100%",
                height:"100%",
                alt:"图片不存在"
            }
        }
    });
</script>
</html>
  • v-model—双向绑定
    当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变.
    支持的标签有：
    input、select、textarea
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <!--
        v-model 是双向绑定
        支持的标签有 input select textarea
    -->
    <div id="god">
        <!--在文本框中输入内容，绑定的值也会发生变化-->
        <input type="text" value="text" v-model="text">{{text}}<br/>

        <!--选择框-->
        <input type="checkbox" v-model="hobbys" value="lq">篮球<br/>
        <input type="checkbox" v-model="hobbys" value="ymq">羽毛球<br/>
        <input type="checkbox" v-model="hobbys" value="pq">排球<br/>
        {{hobbys}}<br/>

        <!--单选框-->
        <input type="radio"v-model="sex" value="1">男
        <input type="radio"v-model="sex" value="0">女
        {{sex}}<br>

        <!--下拉框select-->
        <select v-model="food">
            <option value="hsr">红烧肉</option>
            <option value="yjr">盐煎肉</option>
            <option value="xsr">小酥肉</option>
        </select>
        {{food}}<br/>

        <!--文本域textarea-->
        <textarea rows="20" cols="20" v-model="textarea"></textarea>
        {{textarea}}
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的标签 一般都挂载id选择器 */
        el:"#god",//挂载类型选择器(.god),挂载标签(div)
        /*data准备的数据*/
        data:{
            text:"文本",
            food:"yjr",
            hobbys:["pq"],//可以设置默认选中的值
            sex:0,//默认选中女
            textarea:"文本域"
        }
    });
</script>
</html>
  • v-on—绑定事件
    调用方法传参时需要加括号,无参可以不加
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <!--
        v-on 绑定事件 绑定表达式或者事件
    -->
    <div id="god">
        <!--完整写法-->
        <input type="button" v-on:click="num++" value="按下加一">{{num}}
        <!--简写 调用方法时 传递参数需要加括号 -->
        <input type="button" @click="show('传参加括号')" @mouseout="show" value="弹弹弹">
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的标签 一般都挂载id选择器 */
        el:"#god",//挂载类型选择器(.god),挂载标签(div)
        /*data准备的数据*/
        data:{
            num:0,
        },
        methods:{
            show(msg){
                alert("突然出现。。。。"+msg)
            }
        }
    });
</script>
</html>
  • v-show—显示或隐藏
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue核心库之后 默认有一个Vue内置对象-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<body>
    <!--
        v-on 绑定事件 绑定表达式或者事件
    -->
    <div id="god">
        <span v-show="isShow">这是秘密...</span>
        <input type="button" value="显示或隐藏" @click="show">
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        /*el 表示配置挂载的标签 一般都挂载id选择器 */
        el:"#god",//挂载类型选择器(.god),挂载标签(div)
        /*data准备的数据*/
        data:{
            isShow:true
        },
        methods:{
            show(){
                this.isShow=!this.isShow;
            }
        }
    });
</script>
</html>
大份土豆加凉面
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue总结
kochiya_的博客
02-27 329
Vue es特征 变量的声明 let a = 20;//使用let声明的是块级的 const a = 5;//此时a不能再被赋值 解构表达式 let arr = [1,2,3] let [a,b,c] = arr let obj = { name:"Tom", age:23 } let {name,age,ss} = obj 箭头函数 let obj = { show1:function(a) {}, show2:(b)=>{}, show3(c){},
Vue初学总结 vue入门
WCWAWSL的博客
08-05 356
Vue初学总结常用指令大胡子表达式{{}}v-for（循环指令）v-show、v-if （判断是否显示）v-modelv-bindv-model 常用指令 大胡子表达式{{}} 下面展示一些 大胡子表达式的用法。 可以用来直接取data里的值、用来对值进行运算，进行三目运算，运行函数 <div id="vue"> {{a}},{{b+c}},{{b*2}},{{d?'真':'假'}},{{2+3}},{{f()}} </div> <script type="text/java
vue的基础学习(二)
哆来A梦没有口袋的博客
02-04 314
一.{{}} - 胡须表达式 表达式里面写在哪里？ - 表达式写在HTML的标签中 表达式里面写什么？ - 可以直接写data中的数据，也可以写基本的js语句 <template> <div> <p>{{name}}</p> <p>{{num == 1 ? nam...
学习vue——vue.js入门(二)
weixin_41713731的博客
04-29 239
vue计算属性conputed computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理； computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的...
vue {{}} 大胡子表达式里面可以写些什么
热门推荐
cofecode的博客
11-29 2万+
vue {{}}里面写js表达式可以写些什么？主要有1.{{num + 1}} 一元运算府data:{ num:5 }2.{{status ? ‘succeed’ : ‘failed’}} 三元表达式data:{ status: true }3.{{changeTime()}} 运行函数changeTime(){ return this.value.replace(/\d/g
Vue学习-01
weixin_43386350的博客
03-07 799
Vue基本概念 vue是一个JavaScript渐进式框架 @vue/cli脚手架 Vue 指令
Vue-1
weixin_45503872的博客
04-19 516
在Vue的起步中，区分开发环境和生产环境，两者的不同，开发环境可以清晰的看清源码，生产环境就是将源码进行压缩，占比大小更小，我们学习过程中使用生产环境。// 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用。我们需要注意的是，所有的对象中的清单内容，都是Vue规定，内置的，不可以自由发挥。注意，表达式支持简单，比如简单判断，比如三元表达式，不可以使用if等等复杂判断。上面代码中content对象是我们自己随意创建的，所以是不支持在Vue中使用的。上面的写法是错误的，因为不支持使用复杂判断。
vue-okr-tree:http
03-19
更新时间2021/01/13增加updateKeyChildren方法：vue-okr-tree@1.0.7 更新时间2021/02/03增加node-btn-content属性，对展开圆圈内容自定义处理vue-okr-tree@1.0.8 更新时间2021/02/04增加showNodeNum属性显示子节点数...
vue-devtool5.3.3可安装包
03-01
这个包从开始到最后出来效果，经过了两天的时间，走了很多弯路，但最终还能搞定。...编译的环境window10 yarn，cnpm,npm都是最新的包，当然vue-devtools5.3.3是2020.03.01下载的，估计3个月内，应该是最新的吧。
vue-simple-calendar-sample:vue-simple-calendar的演示应用程序
05-11
Vue-简单日历样本 展示vue-simple-calendar组件的示例应用程序 这是用于开源vue-simple-calendar Vue组件（ ）的演示应用程序。 有关现场演示，请访问 。 构建设置 # install dependencies npm install # serve ...
vue-routing-01
04-03
Vue.js 是一款非常流行的前端JavaScript..."vue-routing-01-main"可能是这个项目的主要入口文件，包含了Vue应用和Vue Router的配置。通过学习和实践这些知识，你可以掌握Vue应用的导航和状态管理，进一步提升开发能力。
vue-router快速入门
01-27
【Vue-Router快速入门】 Vue-Router是Vue.js官方的路由管理插件，它与Vue.js深度集成，专为构建单页面应用（SPA）而设计。在传统的网页应用中，页面间的跳转通常是通过超链接完成。而在Vue-Router驱动的SPA中，路径...
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
最新发布
08-14
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
深度探索：神经网络在图像识别中的革命性应用
08-14
神经网络是一种受人脑结构启发的数学模型，它由大量的节点（或称为“神经元”）相互连接构成。这些节点通常组织成层，包括输入层、隐藏层和输出层。每个神经元可以接收来自前一层的输入，通过某种激活函数处理这些输入，然后将结果传递给下一层的神经元。 神经网络能够通过学习大量的数据来识别模式和特征，这使得它们在图像识别、语音识别、自然语言处理等领域有着广泛的应用。它们也可以用于预测、分类和回归等任务。 训练神经网络通常涉及到一个称为“反向传播”的过程，通过这个过程，网络可以调整其内部参数（权重和偏置），以便更好地完成特定的任务。这个过程通常需要大量的计算资源，并且伴随着梯度下降或其他优化算法来最小化损失函数，从而提高模型的性能。 随着深度学习技术的发展，神经网络变得更加复杂和强大，出现了各种类型的网络结构，比如卷积神经网络（CNNs）用于图像处理，循环神经网络（RNNs）用于序列数据，以及长短期记忆网络（LSTMs）等。
基础会计教学课件第十一章财务会计报告.pptx
08-14
基础会计教学课件第十一章财务会计报告.pptx
基于Android网络聊天软件APP设计与实现.docx
08-14
基于Android网络聊天软件APP设计与实现.docx
基于Android音乐播放器设计与实现2.docx
08-14
基于Android音乐播放器设计与实现2.docx
深度学习基础：理解神经网络及其应用.md
08-14
深度学习基础中的神经网络原理及其广泛应用。文章首先介绍了神经网络的基本构造、激活函数、反向传播等核心概念，详细讲解了卷积神经网络（CNN）、循环神经网络（RNN）等常见神经网络模型的特点及应用场景。接着，文章展示了神经网络在语音识别、图像识别、自动驾驶、医疗影像分析、金融分析、推荐系统等领域的成功案例。此外，还讨论了深度学习的发展趋势，如更深层次的网络、自监督学习、模型压缩、多模态学习及其在实际应用中的挑战与局限性。文章特别提到神经网络对数据的高度依赖、训练中的计算成本、模型的可解释性问题以及泛化能力不足等技术难点。总体上，本文为读者提供了一个从基础到应用、从原理到前沿发展的全景视角，强调了深度学习在推动人工智能技术发展的重要性。
员工关系中的法律问题.pptx
08-14
员工关系中的法律问题.pptx
vue-mj-daterangepicker
08-12
from: '2022-01-01', to: '2022-01-10' } }; }, methods: { handleRangeChange(range) { console.log('Selected range:', range); } } }; ``` 这只是一个简单的示例，您可以根据您的具体需求来自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值