vue entry 0 small demo (mount point, templates, examples)

vue entry 0 small demo (mount point, templates)

With direct reference vue.js

First say a few basic concepts

1, i.e., the mount point el: vue instance when elements anchored place.

2. That template template: template mount point at the time of the assignment vue instantiated.

3. There symbol interpolation assignment expression {{msg}}, v-text = "msg", v-html = "msg" css similar wording

Example 4. That data: Data: {MSG: '! Hello World' }

4. Event represents: v-on: click = "handleclick", when vue method handleClick click instruction, v-on: click abbreviated @click

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

The short v-bind attribute binding: bind or: v-bind: title = "title1"

Here is the code

Effect: display hello world, becomes the world when clicked

<!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" >   <-! Mount point -> 
    <-! <P> {{MSG}} </ P> -> <-! Templates ->   <! - {{}} MSG expression to the interpolation-text = V == 'MSG' = V-HTML "MSG" -> 
    <-! <P V-text = "MSG"> </ P> - > 
    <-! <HTML-P = V "MSG"> </ P> -> 
    < div V-ON: the 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 and two-way binding properties

Knowledge Point: v-bind: title, v-model

display effect:

<!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 title = "the this IS Hello World"> {{MSG}} </ div> ->
<div the bind-V: title = "TITLE1"> {{MSG}} </ div> <! - the data item property binding: V = the bind the bind-: ->
<div: title = "title"> {{MSG}} </ div> <- data binding property:! bind = v-bind : ->
<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>

vue entry 0 small demo (mount point, templates, examples)

Guess you like