软件培训 -- 入门VUE

最新推荐文章于 2024-04-18 08:24:48 发布

jomes_wang

最新推荐文章于 2024-04-18 08:24:48 发布

阅读量465

点赞数

本文链接：https://blog.csdn.net/jomes_wang/article/details/111627503

版权

软件培训 – VUE

一：Vue 的安装与使用

1.1 script 引入

下载 vue.js 文件然后 script 引入

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

可以使用 CDN 来引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.2 使用 vue-cli 来开发

yarn global add vue
vue create test
cd test
yarn serve

二：指令的学习

2.1 v-text 和插值表达式的学习

2.1.1 插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<body>
  <div id="app">
    <div class="first">
      {
    {message}}
    </div>
    <p></p>
    <div class="second" v-text="message" >
    </div>
  </div>
</body>
<script>
var app = new Vue({
    
  el: "#app",
  data:{
    
    message: "Hello Vue!!"
  }
})
</script>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

同时可以在插值表达式中使用 JavaScript 表达式

{
    { number + 1 }}

{
    { ok ? 'YES' : 'NO' }}

{
    { message.split('').reverse().join('') }}

2.2.2 v-text 指令

<span v-text="message"></span>
<!-- 和下面的一样 -->
<span>{
    {message}}</span>

2.2 v-bind 的使用

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

<body>
  <div id="app">
    <img src="https://blog.szuea.com/wp-content/uploads/2020/10/%E8%BD%AF%E4%BB%B6%E8%B7%AF%E7%BA%BF-1024x243.png">
    <p>
      这里是为img的stc 动态绑定一个 图片URL 可以动态更新
    </p>
    <!-- 绑定一个 attribute -->
    <img v-bind:src="imageSrc">

    <!-- 缩写 -->
    <img :src="imageSrc">
  </div>
</body>
<script>
  var vm = new Vue({
    
    el: '#app',
    data: {
    
      imageSrc: "https://blog.szuea.com/wp-content/uploads/2020/10/%E8%BD%AF%E4%BB%B6%E8%B7%AF%E7%BA%BF-1024x243.png"
    }
  })
</script>

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

<div id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {
    { message }}</p>
</div>
<script>
var vm = new Vue({
     
  el: '#app',
  data: {
    
   	message: ""
  }
})
</script>

2.4 v-if 的学习 (条件渲染)

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
     <!-- 也可以用 v-else 添加一个“else 块”： -->
    <div v-else-if="seen"> 这里是v-else-if </div>
    <div v-else>这里是v-else </div>

最低0.47元/天解锁文章

jomes_wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
软件培训 -- 入门VUE

软件培训 – VUE一：Vue 的安装与使用1.1 script 引入下载 vue.js 文件然后 script 引入<script src="./vue.js"></script>可以使用 CDN 来引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&gt...
复制链接

扫一扫