current position：Home>Front end Vue template

Front end Vue template

2022-04-29 05:11:53【A little rabbit who likes eating radishes】

vue Templates

initial Vue
Vue example
Template syntax
- 1.vue Instructions ：
- 2. Interpolation Syntax

initial Vue

First time to know Vue:
1, Want to make Vue Work , You have to create a Vue example , And to pass in a configuration object ;
2,root The code in the container still conforms to html standard , Bei just mixed in some special Vue grammar ;
3,root The code in the container is called [Vue Templates ],template.

Vue example

el by Vue Instance selection container
One Vue An instance can only take over one container , vice versa . namely , Only one-to-one correspondence .
Data change , The page will automatically update

Vue Included in the instance el Used to specify the current Vue Container of instance container service , The value is usually css Selector string （ Including but not limited to id、class Selectors ）.
Use... In the corresponding container { { Insert content }}. Insert content , The content is js expression （ Will generate a value ）.

<!-- * @LastEditors:  A little rabbit who likes to eat radishes  * @Date: 2022-04-18 21:59:22 * @LastEditTime: 2022-04-18 21:59:22 * @FilePath: \vuejs-learn\vue-start\hello-world.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Hello , The world </title>

    <!-- Icons can be displayed in favorites -->
    <link rel="Bookmark" type="image/x-icon" href="../favicon.svg"/>
    <!-- The icon can be displayed in the address bar -->
    <link rel="icon" type="image/x-icon" href="../favicon.svg"/>
    <link rel="shortcut icon" href="../favicon.svg">

    <!--  introduce vue -->
    <script src="../vuejs/vue.js"></script>
  </head>
  <body>

    <!-- -------------------------------------------------- Vue The container corresponding to the instance  -->
    <div id="root">
      <h1> Hello !
        {
   {name}}</h1>
    </div>
    <script> //  prevent  vue  Generate on startup   Generate a prompt  Vue.config.productionTip = false; // -------------------------------------------------- //  establish Vue example  new Vue({
       el: '#root', //  For the current Vue Instance specifies the service container  data() {
       // data  Store the data , by el Specify the container to provide data  return {
      name: 'World'} } }); </script>
  </body>
</html>

Template syntax

1.vue Instructions ：

Used for tag properties

v-bind Dynamically bind tag properties ,id,……
v-bind: attribute =“ expression ”,v- In the first instruction , In the quotation marks after the equal sign is the expression

v-on Binding methods and events , Add event listener
v-model Two way binding between input and return data
v-if Whether the element is displayed according to the condition , be used for Vue Insert / to update / Automatically apply transition effects when removing elements .
v-for Render project list

2. Interpolation Syntax

Located in the content of the template label
Can read data() Everything in , Can read Vue Everything on the instance , Can read Vue Everything on the prototype
{ { js expression }} , Put the specified content in the specified location .

<!-- * @LastEditors:  A little rabbit who likes to eat radishes  * @Date : 2022-04-19 09: 15: 22 * @LastEditTime: 2022-04-19 09:46:16 * @FilePath: \vuejs-learn\vue-start\vue-template-syntax.html * * 1.v-bind Used to dynamically bind tag properties , It can be abbreviated as a colon  * 2. Interpolation Syntax  {
    {  expression  }}  For label content , You can use all data The data in . -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Template syntax </title>
  <!-- Icons can be displayed in favorites -->
  <link rel="Bookmark" type="image/x-icon" href="../favicon.svg" />
  <!-- The icon can be displayed in the address bar -->
  <link rel="icon" type="image/x-icon" href="../favicon.svg" />
  <link rel="shortcut icon" href="../favicon.svg">

  <!--  introduce vue -->
  <script src="../vuejs/vue.js"></script>
</head>

<body>
  <div id="root">
    <h1> Hello !{
   {name}}</h1>
    <h2> Welcome to {
   {school.name}}, Click on 
      <a :href="school.url" target="_blank" rel="noopener noreferrer"> Link learning {
   {school.course}}.</a>
    </h2>
  </div>

  <script> Vue.config.productionTip = false; new Vue({
       el: '#root', data() {
       return {
       name: 'Amy', school: {
       name: ' I want to learn by myself ', course: 'ps', url: 'https://www.51zxw.net/' } } } }); </script>
</body>

</html>

Next section : Front end vue Data binding and MVVM

copyright notice
author[A little rabbit who likes eating radishes],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261123446621.html