首页 > 其他分享 >vue-基础

vue-基础

时间:2023-06-14 21:44:42浏览次数:37  
标签:vue 插值 标签 基础 else imgSrc 表达式

项目的注意事项:
1.template必须是一个且必须有一个跟元素
2.导入的时候 webpack默认 导出的整个组件 整个组件包含了 data 言外之意
整个组件包含了 你所要导出的对象
3.一个vue的实例只能挂载一个标签。

1.插值表达式:
{{数据}} 在data里面 data(){
return {
..
}
}
注意点:
1.插值表达式可以支持运算
2.插值表达式可以支持三元表达式
3.插值表达式可以是字符串
4.数据必须在data中定义,否则无效
5.插值表达式不可以在属性里面
6.但是不能使用语句 if for
指令:
一个标签的命令,有特殊含义:特点:以v-开头 说明是vue的指令。
指令:写在当前标签里面 注意只对当前标签起作用。
注意点:
1.在指令的后面不需要加{{}}

v-if v-else v-else-if 最终这个指令的目的就是让元素创建与删除。
使用1:
我是span元素1
我是span元素2
使用2:
  • 1

  • 2

  • 2

  • 注意点:
    1.必须要先写v-if在写v-else
    2.v-if可以单独存在, 但是 v-else不可以
    3.v-if 和 v-else 必须是兄弟关系
    4.如果不想让结构变化&显示多个标签 外侧使用template包裹

    v-bind:
    作用:1.给标签做属性绑定的。
    语法:
    v-bind:属性='值'
    :属性='值'
    注意点:
    如果属性值是一个路径的形式,那么要么 require形式 要么import导入
    // imgSrc:require('./assets/logo.png'),
    import imgSrc from './assets/logo.png'
    imgSrc:imgSrc,
    img :src='imgSrc'

    @click事件:
    语法:
    <button @click='name="rose"'>点击
    <button @click="addCount">点击让count+1 {{count}}
    <button @click="addCounts(5)">点击让count+5 {{count}}
    注意点:
    1.操作vue中的数据
    1.1在视图层不需要加this
    1.2在数据层必须要加this.属性||方法
    2.@click后面跟的函数名 可以加() 可以不加 但是如果有参数的存在, 那么久必须要加参数。
    3.如果没有传递参数 那么默认参数就是事件源参数 e
    4.如果需要参数且需要事件源参数 那么传递的实参必须叫 $event
    5.在methods里面不可以写箭头函数

    事件修饰符:

    <a :href="url" @click.prevent="">跳转

    <!-- <div class="bigbox" @click="parentHandler">
      parent
      <div class="box" @click.stop="childrenHandler">children</div>
    </div> -->
    
    测试提交一次 ======================================================== 双向数据绑定:
    <!-- 意味着 数据控制着 视图  视图控制着数据-----双向数据绑定 -->
    <input type="text" v-model="msg"> <br>
    <!-- 多选 -->
      <!-- 使用: 1.v-model+数组   2.收集的是value的值 -->
           <!--   2.如果hobby不是数组 是基本数据类型 则含义:代表多选框的选中与没选中 -->
      <!-- 注意点: -->
            <!-- 不使用vue的时候  默认选中项是 checked  如果使用的v-model(true选中 false没选中) checked则无效 -->
    <input type="checkbox" value="橘子"  v-model="hobby">橘子
    <input type="checkbox" value="苹果" v-model="hobby">苹果
    <input type="checkbox" value="香蕉" v-model="hobby">香蕉 <br>
    
    <!-- 单选:使用: 1v-model='值' 2.选中的时候获取的是value的值  如果value的值 和 变量相同则是默认选中的 -->
    <input type="radio" value="男" v-model="sex">男
    <input type="radio" value="女" v-model="sex">女 <br>
    <!-- 下拉列表 -->
    <select v-model='city'>
      <option value="南京">南京</option>
      <option value="上海">上海</option>
      <option value="杭州">杭州</option>
      <option value="北京">北京</option>
    </select> <br>
    <!-- 文本域 -->
    <textarea v-model="values"></textarea>
    

    ======================================================================================================
    v-model修饰符:





    标签:vue,插值,标签,基础,else,imgSrc,表达式
    From: https://www.cnblogs.com/jiaoliuxuexi/p/17481413.html

    相关文章

    • VUE&Element
      VUE&Element今日目标:能够使用VUE中常用指令和插值表达式能够使用VUE生命周期函数mounted能够进行简单的Element页面修改1,VUE1.1概述接下来我们学习一款前端的框架,就是VUE。Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。我们之前也学习过后端的框......
    • 【JS基础】Function构造函数
      Function()构造函数创建了一个新的Function对象,直接调用构造函数可以动态创建函数,与eval(可能访问到本地作用域)不同的是,Function构造函数只创建全局执行的函数。constsum=newFunction('a','b','returna+b')console.log(sum(1,2)); 参考:Function()构造函数-J......
    • uniapp vue.config.js配置chunk-vendors.js文件拆分
      constpath=require('path')functionresolve(dir){returnpath.join(__dirname,dir);}constCompressionPlugin=require('compression-webpack-plugin')consthtmlWebpackPlugin=require('html-webpack-plugin')htmlWebpackPl......
    • python基础知识——字符串
      1、字符串的格式化python将若干值插入到带有“%”标记的字符串中,实现动态地输出字符串。格式:"%s"%str"%s%s"%(str_1,str_2)例如:str_0="I"str_1="Love"str_2="China"format="%s%s%s"%(str_0,str_1,str_2)printformat#ILoveChi......
    • python基础知识——内置数据结构(集合)
      python中的set是指一系列无序元素的集合,其中的元素都是相异的,常见的操作包括集合的并集,交集和补集等操作。1、set的创建格式set_name={value1,value2,...}创建空的集合set_name=set()注意:在创建空的集合的时候不能使用set_name={}这样创建出来的是字典。例如animals......
    • 【python基础】函数-初识函数
      函数是带名字的代码块,用于完成具体的工作,无需反复编写完成该工作的代码。之前我们接触过print函数,数据类型转换中的int函数、str函数,还有列表中的append函数、pop函数、remove函数,以及字典中的keys函数、values函数等等,其实在正式学习函数之前,我们已经接触了函数,只不过没有接触过......
    • python基础知识——内置数据结构(字典)
        字典是有“键-值”对组成的集合,字典中的“值”通过“键”来引用。“键-值”对之间用逗号隔开,并且被包含在一对花括号中。1、字典的创建格式dictionary_name={key1:value1,key2:value2,...}创建空的字典dictionary_name={}例如dict={'b':'beijing','s':......
    • python基础知识——函数
      函数其实就是一段可以多次调用的代码。1、函数的定义格式def函数名(参数1[=默认值1],参数2[=默认值2],...):...return表达式函数名的命名规则:函数名可以是字母、数字或下划线组成的字符串,但是不能以数字开头。例如加法操作:defaddFunc(x,y):returnx+......
    • python基础知识——基本语法
      在python基础知识这个系列中,准备罗列出我学习python的一些基础知识,包括:基本语法控制语句内置数据结构模块和函数字符串文件处理面向对象异常处理以前写机器学习算法喜欢使用Matlab语言,接触python后,觉得python有很多地方还是比Matlab方便点,各有各的优势吧,在公司还是......
    • python基础知识——控制语句
      控制语句主要有条件语句和循环语句。一、条件语句1、if语句格式if表达式:语句1else:语句2如下面的例子:a=raw_input('x:')ifint(a)>0:printaelse:print-int(a)其中,raw_input()用于获取控制台的输入,由于raw_input()返回的是字符串,......