vue入门 0 小demo (挂载点、模板、实例)

vue入门 0 小demo (挂载点、模板)

用直接的引用vue.js

首先讲几个基本的概念

1、挂载点即el：vue 实例化时元素挂靠的地方。

2.模板即template：vue 实例化时挂载点下赋值的模板。

3.赋值时的符号有插值表达式 {{msg}} 、 v-text="msg" 、v-html="msg" 类似于css 的写法

4.实例即数据：data:{msg:'hello world!'}

4.事件表示：v-on:click="handleclick" ，vue 指令点击时的方法handleclick， v-on:click 简写@click

methods: { handleclick:function () { this.msg='world';} }

5. 属性绑定 v-bind 简写:bind or : v-bind:title="title1"

下面为代码

效果为：显示 hello world ,点击时变为world

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/vuejs/vue.js"></script>
   
</head>
<body>
  <div id="app">  <!--挂载点-->
    <!-- <p>{{msg}}</p> --><!--模板-->  <!--{{msg}} 为插值表达式 == v-text='msg' v-html="msg"-->
    <!-- <p v-text="msg"></p> -->
    <!-- <p v-html="msg"></p> -->
    <div v-on:click="handleclick">{{msg}}</div>
  </div>  
</body>
<script>
  new Vue({
    el:'#app',
    // template:'<p>{{msg}}</p>',
    data:{
      msg:'hello world!'
    },
    methods: {
        handleclick:function () {
            this.msg='world';
        }
    },
  });
</script>
</html>

02属性和双向绑定

知识点：v-bind:title 、v-model

显示效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/vuejs/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <div title="this is hello world">{{msg}}</div> -->

<div v-bind:title="title1">{{msg}}</div> 
<div :title="title">{{msg}}</div> 
<input v-model="content"/>

         <div>{{content}}</div>
    </div>
    <script>
     new  Vue({
         el:'#app',
         template:'',
         data:{
            msg:'hello world',
            title1:'this is hello world',
            content:'世界你好！'
         },
         methods: {
             
         },
     });
    </script>
</body>
</html>

posted @ 2019-06-23 06:26 每天进步一点点！阅读(570) 评论(0) 编辑收藏举报

刷新页面返回顶部

每天进步一点点！

vue入门 0 小demo (挂载点、模板、实例)

公告