当前位置: 代码迷 >> 综合 >> vuejs--基本指令1
  详细解决方案

vuejs--基本指令1

热度:38   发布时间:2024-01-06 09:31:22.0

vuejs的下载

1,可以通过复制官网链接cdn,链接最新版本的vue(最新的稳定版)
2,通过nodejs,在其包管理器npm或者yarn进行下载
3,直接去github上面下载源码

代码托管平台

  1. 码云 gitee
  2. gitlab(一个产品,完全类似GitHub或者gitee,是一个可以在企业内部运行的代码托管平台)(商业公司更愿意使用 svn 作为版本控制器)
  3. coding.net(深圳一家公司做的代码的托管平台)

vue指令

v-for 遍历数组,对象

1,v-for 是些在最小的循环单元里面的
2,v-for=’’ "引号里面其实是一个for in循环
3,v-for 可以遍历数组和对象

<body>
<ul><li v-for="item in arr">{
    {
     item }}</li>
</ul><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm=new Vue({
    el:'ul',data:{
    arr:[1,2,3,4]}})
</script>
</body>
v-html 转译html原文

1,如果是直接在插值表达式里面书写html代码,那么vue不会进行转译,为了防止xss攻击,
2,在需要转译的地方加上v-html=" ",引号里面是html代码或者模型变量,vue就会对html代码进行转译,但是这个方法使用要慎重,要确保你的html代码是安全的
3

<body>
<div><p >{
    {
     html}}//<p>hello</p></p><p v-html="html"></p>//hello
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    html: "<p>hello</p>"}})</script>
</body>
v-text 设置元素的innerText作为模型变量的值

1, < p>{ { title }}< /p>有页面闪烁问题:如果网络差,或者用户电脑配置差,用户会看到插值表达式
2,用v-text可以完美的解决页面闪烁问题,因为这种方式在标签内没有插值表达式
3,但是如果标签之间还有别的内容的话,就会覆盖,用拼接的方式将标签里面原有的东西放在v-text里面就可以解决
4,但是这里要注意一个问题,拼接的时候,外面是单引号,里面要双引号,外面双,里面就要单

<body>
<div><!--页面闪烁问题:如果网络差,或者用户电脑配置差,用户会看到插值表达式--><p>{
    {
     title }}</p><!--用v-text可以完美的解决页面闪烁问题,因为这种方式在标签内没有插值表达式--><p v-text="title"></p><!--但是如果标签之间还有别的内容的话,就会覆盖,--><!--解决方法如下,用拼接的方式将标签里面原有的东西放在v-text里面--><!--但是这里要注意一个问题,拼接的时候,外面是单引号,里面要双引号,外面双,里面就要单--><p v-text="'内容:'+title"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    title: "hello vue!"}})</script>
</body>
v-cloak 解决页面闪烁问题
  1. 不希望出现闪烁的标签设置 v-cloak属性
  2. 设置 style 样式,使用该属性选择器:display:none
  3. 当执行完毕后,vuejs 会把所有有 v-cloak指令移除

css:

<style>[v-cloak]{
    display: none;}
</style>

html:在标签上加上v-cloak属性

<p v-cloak>{
    {
    title}}
</p>

js:这里没有需要修改的地方

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "p",data: {
    title: "hello vue!"}})</script>
v-if 删除和添加节点

1,true时显示,false时隐藏

<body>
<div>
<p v-if="true">//显示{
    {
    title1}}
</p>
<p v-if=" false ">{
    {
     title2}}</p>//隐藏
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    title1: "hello if!",title2:"hello else"}})</script>
</body>
v-if 和 v-else

1,当v-if 为true时,v-else为false,当v-if为true时,v-else 为 false

<body>
<div>
<p v-if="true">//显示{
    {
    title1}}
</p>
<p v-else>{
    {
     title2}}</p>//隐藏
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    title1: "hello if!",title2:"hello else"}})</script>
</body>

结果如下,v-if和v-else是将元素移除或者添加
在这里插入图片描述

v-show 控制display属性,显示与否

当true时,display:block,当false时,display:none

<body>
<div><p v-show="true"> {
    {
     title1 }} </p><p v-show="false"> {
    {
     title2 }} </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    title1: "hello true",title2:"hello false"}})
</script>
</body>

结果如下:v-show是控制display的属性值,但是元素还存在
在这里插入图片描述

v-if 和v-show该如何取舍?

v-if:只能实现一次的显示和隐藏
v-show:可以实现多次显示与隐藏
看你的业务需求如何,合理选择指令

v-pre 不会解析vuejs语法,原封不动的输出
<body><p v-pre> {
    {
     title }} </p><!-- 输出{
    {
     title }}-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "p",data: {
    title: "hello true",title2:"hello false"}})
</script>
</body>