Vue.js 模版语法代码

 初始化一个Vue实例，控制id为app的区域。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{
        margin:0;
        padding: 0;
      }

    </style>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app1">我是app1控制的区域

    </div>


    <script type="text/javascript">

      let vue1 = new Vue({
        el:'#app1',
        data:{
          //注意自定义组件时，写法不同，是以函数的方式返回
        },
        methods:{
        },
        computed:{
          //计算属性的特点就是 只要返回结果没有发生变化 那么就只会被执行一次
        },
        components:{
          //自定义局部组件
        }
        filters:{
          //自定义局部过滤器
        }
        directives:{
          //自定义局部指令
        }
      })

    </script>
  </body>
</html>

 

例子:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
  </head>


  <body>
    <!-- 模版语法 -->
    <div id="app">
      {{ message }}
    </div>

    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>

    <div id="app-3">
      <p v-if="seen">现在你看到我了</p>
    </div>

    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>

    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">反转消息</button>
    </div>

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

    <div id="app-7">
      <base-checkbox v-model="lovingVue"></base-checkbox>
    </div>


  </body>

  <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })

      var app2 = new Vue({
        el: '#app-2',
        data: {
          message: '页面加载于 ' + new Date().toLocaleString()
        }
      })

      var app3 = new Vue({
        el: '#app-3',
        data: {
          seen: true
        }
      })

      var app4 = new Vue({
        el: '#app-4',
        data: {
          todos: [
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
          ]
        }
      })

      var app5 = new Vue({
        el: '#app-5',
        data: {
          message: 'Hello Vue.js!'
        },
        methods: {
          reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
          }
        }
      })

      var app6 = new Vue({
        el: '#app-6',
        data: {
          message: 'Hello Vue!'
        }
      })
      Vue.component('base-checkbox', {
        model: {
          prop: 'checked',
          event: 'change'
        },
        props: {
          checked: Boolean
        },
        template: `
          <input
            type="checkbox"
            v-bind:checked="checked"
            v-on:change="$emit('change', $event.target.checked)"
          >
        `
      })
      var app7 = new Vue({
        el: '#app-7',
        data: {
          message: 'Hello Vue!'
        }
      })

  </script>
</html>

 

posted @ 2020-09-29 13:17  liuw_flexi  阅读(192)  评论(0)    收藏  举报