vue初步总结

最新推荐文章于 2022-10-20 13:11:26 发布

l_degege

最新推荐文章于 2022-10-20 13:11:26 发布

阅读量162

点赞数

分类专栏： vue 文章标签： vue初步

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍Vue.js的基本用法，包括实例化Vue、使用模板语法进行数据绑定等。通过实例展示了如何在网页中显示Vue实例的数据，并介绍了Vue提供的常用属性与方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实例化Vue

var vm = new Vue({
  // 选项
})
//----------------分割线
<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

①在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。

②data 用于定义属性，比如实例中有三个属性分别为：site、url、alexa

③methods 用于定义的函数，可以通过 return 来返回函数值。

④{{ }} 用于输出对象属性和函数返回值。

注：当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

2.获取Vue自身定义的属性和方法

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

document.write(vm.$data === data) // true

3.Vue模板语法

理解：

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

①文本插值

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

②使用 v-html 指令用于输出 html 代码

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

③在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

④HTML 属性中的值应使用 v-bind 指令

⑤指令是带有 v- 前缀的特殊属性，有v-if、v-else、v-show、v-for、v-bind、v-on、v-model