current position:Home>Vue basic syntax

Vue basic syntax

2022-04-29 08:17:24hualaoshuan

1. Template syntax 、v Instructions ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Template syntax 、v Introduction to instruction </title>
    <!--  The most traditional and ancient development method , Create a  html  Some development methods cannot be written in this way   When doing some tests, you can use  -->
    <!-- Vue  The core of the library , The runtime automatically renders the relevant content to the page -->
    <!--  Production version , Size and speed are optimized  -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="root">
    <!--  Template syntax :https://cn.vuejs.org/v2/guide/syntax.html -->
    <div>
        {
   { myname }}  - {
   { my.info }}
    </div>
    <div>
        <!-- JS  Expressions support  -->
        <!--  Reference resources :https://cn.vuejs.org/v2/guide/syntax.html#%E4%BD%BF%E7%94%A8-JavaScript-%E8%A1%A8%E8%BE%BE%E5%BC%8F -->
        {
   { myage + 1 }}
    </div>
    <div>
        <!-- test2()  Inside  <b>  The tag is invalid here  -->
        {
   { test() }} - {
   { test2(myage) }}
    </div>

    <!-- v  Instructions :https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4 -->
    <!--  Once it's written  v  Instructions , html  The internal code is invalid  -->
    <div v-html="test2(my.age)">
    </div>

</div>
<script> //  object , There are two basic properties , It's a fixed property  //  The code should be written in  id  by  root  Of  div  below  const config = {
      // el: Mount mark  /  attribute  el: '#root', // data: The actual data  data: {
      myname: "Tom", //  Property name : value  myage: 18, my: {
      age: 30, info: "Tom is a student" }, test: function () {
      return 'this is a function' }, //  Arrow function , Pass the reference at the same time  test2: (age)=> 'My age is <b>' + age.toString() + '</b>' } }; //  Create a  Vue  example , The parameter passed in is an object  new Vue(config); </script>
</body>
</html>

2. v-if Judge ;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-if Judge </title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<!--  It plays a basic role in displaying or not displaying the template  -->
</head>
<body>
<div id="root">
	<!-- v-if  Add judgment conditions later 、 The right expression  -->
<!-- <div v-if="1==1">-->
<!-- <div v-if="test()">-->
<!-- <div v-if="()=>true">-->
	<div v-if="test(age)">
		true  Displayed text 
	</div>
	<div v-else-if="age == 19">
		 Just right  19  year 
	</div>
	<div v-else>
		false  Displayed text 
	</div>

</div>
<script> const config = {
      el: '#root', data: {
      age: 19, test:(age) => age > 19 ? true : false, }, }; new Vue(config); </script>

</body>
</html>

copyright notice
author[hualaoshuan],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290600598605.html

Random recommended