Vue基础（一）

最新推荐文章于 2024-09-26 10:04:54 发布

KevinWWWho

最新推荐文章于 2024-09-26 10:04:54 发布

阅读量171

点赞数 1

分类专栏： vue基础文章标签： vue vue.js javascript html5

本文链接：https://blog.csdn.net/qq_41469919/article/details/118447808

版权

vue基础专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍了Vue的基本用法，包括script引入、Vue构造器（数据和方法定义）、标签绑定（v-bind、v-model、v-on、v-html、v-show、v-if/v-else/v-else-if和v-for）。重点讲解了数据绑定和实例属性使用，适合初学者快速上手。

摘要由CSDN通过智能技术生成

一、Vue引入（script引入）

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

二、Vue构造器
每个 Vue 应用都需要通过实例化 Vue 来实现

<div id="app">
<!--{{ }} 用于输出对象属性和函数返回值-->
    <h1>{{chinese}}</h1>
    <h1>{{english}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
<!--data 用于定义属性-->
        data: {
            chinese: "你好",
            english: "hello"
        },
<!--methods 用于定义的函数，可以通过 return 来返回函数值。-->
        methods: {
            details: function() {
                return  this.chinese + " 的英文是 " +this.english;
            }
        }
    })
</script>

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
 
document.write(vm.$data === data) // true
document.write("<br>") 
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>

三、标签绑定
1、v-bind——单项数据绑定

<!--参数在指令后以冒号指明，在这里href是参数，将该元素的href属性与表达式url的值绑定-->
<a v-bind:href="url">你好</a>

2.v-model——双向数据绑定
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

3.v-on——事件绑定
用于监听 DOM 事件

<a v-on:click="doSomething">

4.v-html——输出 html 代码

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>你好</h1>'
  }
})
</script>

5.v-show——显示、隐藏元素

<div id='itany'>
	<h1 v-show="see">{{msg}}</h1>
</div>
<script>
new Vue({
  el:'#itany',
  data:{
    msg:'hello vue',
    see:true
  }
})
</script>

6.v-if、v-else、v-else-if——条件判断

<div id="app">
<!--JavaScript中“= =”表示抽象相等；而，'===='表示严格相等--> 
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
<!--v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后-->    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-show和v-if区别：
v-if 指令会根据表达式重建或销毁元素或组件以及它们所绑定的事件。v-show 指令只是简单地设置 css 属性
7.v-for——循环语句
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: '1' },
      { name: '2' },
      { name: '3' }
    ]
  }
})
</script>