Vue3（Vuex Vue-router Vue-cli)零基础入门到创建项目教程

vue语法

1.1模板语法

插值 : 1文本 2 html (使用v-html指令操作html内容) 3属性** v-bind** 操作html属性 4 v-on监听事件 5** v-if** 条件语句 6** v-for **循环

用户输入：**v-model **实现双向数据绑定

//1
div
<p>{
  {...}}</p>
/div

//2
div
<p v-html='rewhtml'>111</p>
/div

const new vue(){
  data :{
  return 
  rewhtml:'<span style="color: red">这里会显示红色！</span>'
  }
}
Vue.createApp(app).mount('#app')

//3
//<div><span v-bind='class1 '></span></div>
参数在指令后用冒号声明
<div><span v-bind:class="{'class1':use}"></span></div>
<style>
.class{
color:red,
}
</style>

//4
div
<p v-on:click="事件名称"> </p>
<p @click="事件名称"> </p>//缩写
<p @[event]click="事件名称"> </p>  //动态参数的缩写
//修饰符 修饰符是以半角句号 . 指明的特殊后缀，
//用于指出一个指令应该以特殊方式绑定。
//例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
/div


//5
//因为 v-if 是一个指令，所以必须将它添加到一个元素上。
//如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
div
<p v-if:'seen'> 你看不到我哈哈 </p>
/div
const new vue(){
  data :{
  return 
   seen:true,
  }
}

//6
div
<p v-for :'site in sites'> {
  {site.text}} </p>
/div

const new vue(){
  data :{
  return 
     sites:[ 
         //goole,edge,firefox,
         { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
     ]
  }
}

//7
//v-model 指令用来在 input、select、
//textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，
//根据表单上的值，自动更新绑定的元素的值。
//按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
div
<p > {
  {message}} </p>
<input v-model: 'message'></input>
/div

const new vue(){
  data :{
  return 
    message:"hhhh"
  }
}

1.2、条件语句

1 v-else 2 v-else-if 3 v-show

//1
div
<p v-if:'seen'> 你看不到我哈哈 </p>

<p v-else> 你看到我哈哈 </p>
/div
const new vue(){
  data :{
  return 
   seen:true,
  }
}

//2
div
<p v-if:'optiona'> 你看不到我哈哈 </p>
<p v-else:'optionb'> 你看到我哈哈 </p>
<p v-else-if:'optionc'> 你看到我哈哈 </p>
/div
const new vue(){
  data :{
  return 
   optiona:'hhh'
   optionb:'heihei'
   optionc:'ahhh'
  }
}
//3
//v-show根据条件显示元素
div
<p v-show:'seen'> 你看不到我哈哈 </p>

/div
const new vue(){
  data :{
  return 
   seen:true,
  }
}

1.3循环语句

1 v-for 需要以site in sites的形式 2 v-for 可以读取value 3 v-for 可以读取index 4v-for 可以读取key 5 循环整数 6 显示排序结果 7在自定义组件使用v-for

//1
div
<p v-for :'site in sites'> {
  {site.text}} </p>
/div

const new vue(){
  data :{
  return 
     sites:[ 
         //goole,edge,firefox,
         { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
     ]
  }
}

//2
div
//<p v-for :'value'> {
  {site.text}} </p>
ul
<li v-for ='value in object'> {
  {value}} </li>
/ul
/div

const app = {
  data() {
    return {
      object: {
        name: 'www',
        url: 'http://www.123.com',
        slogan: 'hhhhh！'
      }
    }
  }
}

//3
div
//<p v-for :'value'> {
  {site.text}} </p>
ul
<li v-for ='value in object'> {
  {key}}:{
  {value}} </li>
/ul
/div

const app = {
  data() {
    return {
      object: {
        name: 'www',
        url: 'http://www.123.com',
        slogan: 'hhhhh！'
      }
    }
  }
}
//4
div
//<p v-for :'value'> {
  {site.text}} </p>
ul
<li v-for ='value in object'> {
  {index}}.{
  {key}}:{
  {value}} </li>
/ul
/div

const app = {
  data() {
    return {
      object: {
        name: 'www',
        url: 'http://www.123.com',
        slogan: 'hhhhh！'
      }
    }
  }
}

//6
<div id="app">
  <ul>
    <li v-for="n in evenNumbers">{
  { n }}</li>
  </ul>
</div>

//7
//在自定义组件上，你可以像在任何普通元素上一样使用 v-for：

<my-component v-for="item in items" :key="item.id"></my-component>
//然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

2.1组件component

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。

//1全局组件
<div id="app">