vue初步总结

深碍√TFBOYSˉ_ 2021-09-23 01:26 282阅读 0赞

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