vue基础1

最新推荐文章于 2023-05-17 19:46:30 发布

vic_123

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量297

点赞数

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

本文链接：https://blog.csdn.net/vic4399/article/details/121614583

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. Vue的基本使用

1.新建一个HTML文件，在head结束标签上面，引入Vue库文件

<script src="https://unpkg.com/vue@3.2.20/dist/vue.global.js"></script>

或下载保存为vue.js

<script src="./js/vue.js"></script>

2.在html文件的body标签中，创建一个div标签，给div标签添加id属性值为app

<head>
  <!-- 省略代码 -->
</head>
<body>
  <div id="app"></div>
</body>

3.创建script标签

<script>
	let app =new Vue({
        el:'#app', // Vue要管理哪个元素中的内容
        data{
          message: 'Hello Vue!'
    	}
    })
</script>

4.在浏览器中显示

<body>
  <div id="app">
    <!-- {{}} 双花括号被称为 插值表达式 -->
    {{ name }}
  </div>
</body>

2. data和methods

<script>
 let app = new Vue({
      el: "#app", 
      data: { // 状态 也叫数据 
        // key: value
        name: "张三"
      },
     
      // 方法 methods也是一个对象 你可以把想要声明的方法放在这个对象中
      methods: {
        // 注意: 在methods中定义的方法 没有特殊用途 千万千万不要用箭头函数
         handleClick() {
          alert("我是被点击之后弹出的框")
        },
      }
</script>

3 指令

内容渲染指令

v-text 用来渲染DOM元素的文本内容，类似于JavaScript中的innerText

v-html 用来渲染DOM元素的文本内容，类似于JavaScript中的innerHtml

<h1 v-text="message"></h1>

<h1 v-html="message"></h1>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '<em>泥猴啊!</em>',
        }
    })
 </script>

条件渲染指令

v-if/v-else-if/v-else 根据判断条件判断内容是否编译成真实的DOM元素

v-show 根据判断条件判断内容是否显示在页面上(控制的是display属性)

条件渲染指令: 根据条件的真假判断内容是否展示

<p v-if="score == 'A'">优秀</p>
<p v-else-if="score == 'B'">良好</p>
<p v-else-if="score == 'C'">中等</p>
<p v-else>一般</p>


<p v-show="score == 'A'">优秀</p>
<p v-show="score == 'B'">良好</p>
<p v-show="score == 'C'">中等</p>
<p v-show="score == 'D'">一般</p>

<script>
    // 作用:
    new Vue({
        el: "#app",
        data: {
            score: "D"
        }
    })
</script>

`v-if` 和 `v-show` 的区别

共同点

v-if 和 v-show 都能实现元素的显示隐藏
不同点

v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；
v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；
v-if 有更高的切换开销，v-show 切换开销小
v-if 有配套的 v-else-if 和 v-else，而 v-show 没有
v-if 可以搭配 template 使用，而 v-show 不行

列表渲染指令

<!-- key为了保证 让 Vue认识 哪些元素 变化了 哪些元素没有变化  如果没有key意味着该元素没有唯一标识 vue就不知道谁是谁 就按照位置进行更新 -->
<!-- key属性 必须在 v-for中写 而且 key的值不能重复且唯一 一般这个值 只能是 数字或者字符串 -->

<!--v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in list-->
<ul>
    <li v-for="item in hobby">{{item.a}}</li>
</ul> 

<!-- v-for 与 v-if 一同使用
当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量
可以把 v-for 移动到 <template> 标签中来修正-->

<ul>
    <template v-for="(item, index) in hobby" >
        <li v-if="item.flag === true" :key="item.id">{{index}}---{{item.a}}</li>
    </template>

</ul>

<script>
    // 作用:
    new Vue({
        el: "#app",
        data: {
            score: "D"
              hobby: [{ id: 1, a: "打篮球", flag: true }, { id: 2, a: "踢足球", flag: false }, { id: 3, a: "画素描", flag: true }, { id: 4, a: "听歌剧", flag: true }, { id: 5, a: "练武术", flag: true }]
        }
    })
</script>

vic_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础1

1. Vue的基本使用1.新建一个HTML文件，在head结束标签上面，引入Vue库文件<script src="https://unpkg.com/vue@3.2.20/dist/vue.global.js"></script>或下载保存为vue.js<script src="./js/vue.js"></script>2.在html文件的body标签中，创建一个div标签，给div标签添加id属性值为app<head> &l
复制链接

扫一扫