This is the 10th day of my participation in Gwen Challenge

1.Vue implements Hello World

A global variable Vue is declared when vue.js is introduced

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Hello World</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">{{content}}</div>
    <! {{}} call the interpolation expression to call the corresponding data in data -->
    <script>
        var app = new Vue({Create an instance of Vue
            el:'#app'.//el: represents the area managed by the Vue instance. '#app' means that the Vue instance takes over all the contents of the DOM tag with id="app"
            data: {content:'Hello World'// call {{content}} belonging to Vue instance}})</script>
</body>
</html
Copy the code

El: indicates the jurisdiction of the Vue instance, which represents that Vue takes over the DOM tag with the ID app

Data: Defines some data

Example Change Hello World to Bye World after 2 seconds

<script>
    var app = new Vue({
        el:'#app'.data: {content:'Hello World'}})setTimeout(function(){
        app.$data.content='Bye World'
    },2000)
</script>
Copy the code

Attributes in Vue instances such as EL and data are prefixed with $to distinguish them from user-defined variables

app.$data.content='Bye world';// You can modify the contents of the div and the rest
Copy the code

As the data changes, so does the page

A method of observing changes in the value of a variable before and after

app.$watch('a'.function(newVal,oldVal){
	console.log(newVal,oldVal);
})
Copy the code

2. Vue statements

  • V-on: bind event V-on :click= “” can be shortened to @click=” “
  • V-bind :index=”index” to assign an attribute to an element

2.1 v – if judgment

Show hidden information

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>
Copy the code
var app3 = new Vue({
  el: '#app-3'.data: {
    seen: true}})Copy the code

Type app3.seen=false in the console, and the previously displayed message disappears

2.2 v – a for loop

Todolist

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
Copy the code
var app4 = new Vue({
  el: '#app-4'.data: {
    todos: [{text: 'learning JavaScript' },
      { text: 'learning Vue' },
      { text: 'The whole cattle Project'}]}})Copy the code

From the console, type app4.todos.push({text: ‘New project’}) and you’ll see that a new project has been added at the end of the list.

2.3 V-ON Event Listening

Flip the message

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Inversion of the message</button>
</div>
Copy the code
var app5 = new Vue({
  el: '#app-5'.data: {
    message: 'Hello Vue.js! '
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(' ').reverse().join(' ')}}})Copy the code

2.4 V-model form input and application bi-directional binding

Two-way binding

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
Copy the code
var app6 = new Vue({
  el: '#app-6'.data: {
    message: 'Hello Vue! '}})Copy the code

2.5 summarize

Todolist complete case

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Hello World</title>
    <script src="vue.js"></script>
</head> 
<body>
    <div id="app">
        <! -- Two-way transmission, every change changes -->
        <input type="text" v-model="inputValue">
        <! Execute handleBtnClick whenever the button is clicked -->
        <button v-on:click="handleBtnClick">submit</button>
        <ul>
            <! Select * from v for;
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app'.data: {list: ['Lesson One'.'Lesson 2 content'].// The data traversed to the page
                inputValue: ' ' 
            },
            methods: {
                handleBtnClick:function(){
                    this.list.push(this.inputValue),// Click back to list push the current input field
                    this.inputValue=' '// Clear the input field after clicking}}})</script>
</body>
</html>
Copy the code