HTML5-Vue3入门

最新推荐文章于 2024-05-21 09:43:30 发布

临时工老六

最新推荐文章于 2024-05-21 09:43:30 发布

阅读量835

点赞数

分类专栏： Vue 文章标签： html5 vue.js javascript

本文链接：https://blog.csdn.net/weixin_45967378/article/details/124913957

版权

文章目录

在学Vue之前你得知道js的下面几个知识点

(不知道也没关系,但是至少你得知道css吧?css都没写过几个的先去学css , 最好是了解 : 对象,变量,数组)

ES6语法
ES6模块化
包管理器
原型 , 原型链
数组常用方法
axios
promise

Vue是啥?

就是把数据变成图像 , 同时也是java script的简化版(用script标签包住)
别看它叫Vue, 其实它的底层还是js代码(java script代码)

vue基础
vue-cli
vue-router
vuex
element-ui
vue-3

Vue 代码块快捷设置

文件->首选项->用户片段->输入: 代码块的名称例如: vueApp 然后按回车

{
	//它这里会有一大堆的注释,不用管,接着后面写就行
	"doc for vue": {//文档注释
		"prefix": "vueapp", //启动 快捷代码 的指令 : vueapp
		"body": [ //快捷生成的代码
			"    <div id='app'>",
			"        ${1}", //tab 光标 跳跃
			"    </div>",
			"    <script>",
			"        var app${2} = new Vue({", //tab 光标 跳跃
			"            el: '#app${2}',", //tab 光标 跳跃
			"            data: {",
			"                arr:['${3}','${4}'], ", //tab 光标 跳跃
			"            },  ",
			"            methods: {",
			"                ${5}:function(){", //tab 光标 跳跃
			"                    ${6}", //tab 光标 跳跃
			"                }",
			"            }",
			"        })",
			"    </script>",
		],
		"description": "快速生成vue" //文件说明
	},
	"doc for vue_data": { //快捷生成的代码
		"prefix": "data", //启动 快捷代码 的指令 : data
		"body": [ //快捷生成的代码块
			"data: {",
			"    arr: ['${1}','${2}']",
			"    ${5}:'${6}',",
			"},",
			"    methods: {",
			"       ${7}: function(){",
			"           ${8}",
			"       }",
			"    }",
		],
		"description": "快速生成vue" //文件说明
	},
	"doc for vue_console": {
		"prefix": "consolelog",
		"body": [
			"console.log('$1');",
		],
		"description": "Log output to console"
	},
}

Vue下载

这里我们下载开发版本(包含完整的警告和调试模式): vue.js

Vue使用(注意这里是有4个文件)

在这里插入图片描述

下载的Vue.js源文件关联Html的方式和 css样式表关联Html的方式差不多

<head>
	<!-- css样式表一般放在css文件夹里 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 下载的 "vue.js"源文件 和 自己写的js文件 一般是放在js文件夹里 -->
    <script src="js/vue.js"></script>
</head>

Vue除了在head标签里引入下载的"vue.js"源文件 ,
还得在 body里选择器的后面写与之对应的script标签 (也就是自己写的js代码 , 可内联也可外联 , 记住自己写的js不能出现在head标签里面 , 因为: 它很可能不会生效 . 当然 , 下载的 "vue.js"源文件和自己写的js文件一般是放在js文件夹里 , 下面的js代码我是为了节省地方才放在body标签里的)

"内联"Vue

(先在head标签里引入下载的"vue.js"源文件)

<head>
	<link rel="stylesheet" href="css/index.css">
    <!-- 下载的"vue.js"源文件一般是放在js文件夹里 -->
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        {
  { message }}<!-- 显示: hello Vue! -->
    </div>
    <!-- 选择器的后面 写 与之对应的script标签 -->
    <script>
        var app = new Vue({
     //这个app是实例名称(可自己改 , var smdx = new Vue)
        	//下面的el和data是固定代码
            el: "#app",//这个#app是上面body里面的id="app"选择器的名称(一一对应,相互关联,一个改了一个也得改)
            data: {
     
                message: 'hello Vue!'//这个message和上面的message (一一对应,相互关联,一个改了一个也得改)
}})</script>
</body>

"外联"Vue

(先在head标签里引入下载的"vue.js"源文件)

<head>
	<link rel="stylesheet" href="css/index.css">
    <!-- 下载的"vue.js"源文件一般是放在js文件夹里 -->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {
  { message }}
    </div>
    <!-- 下面的script标签得放在 属性id="app" 的后面(下面) , 下面的script标签放在head标签里将不起作用 -->
    <!-- 引入外部单独的js文件 , 注意路径 -->
    <script src="js/index.js"></script>
</body>

下面的vue代码放在了单独的js文件夹里的index.js文件里
index.js 或 XXX.js 文件默认是javaScript格式的代码,所以不用写 script标签 , 直接写js代码

var app = new Vue({//这个app是实例名称(可自己改 , var smdx = new Vue)
    //下面的el和data是固定代码
    el: "#app",//这个#app是上面body里面的id="app"选择器的名称(一一对应,相互关联,一个改了一个也得改)
    data: {
        message: 'hello Vue!'//这个message和上面的message (一一对应,相互关联,一个改了一个也得改)
    }
});

下面为了节省位置,我将把Vue代码放在body标签里面

别忘了加head标签下面这些(src后面的路径不一定是我这个)

<head>
	<link rel="stylesheet" href="css/index.css">
    <!-- 下载的"vue.js"源文件一般是放在js文件夹里 -->
    <script src="js/vue.js"></script>
</head>

Vue常用属性

var app = new Vue({ })
v-text=“变量名 + ‘单引号放在双引号里面 : 拼接文本’”
v-html=“变量名”
@click=“方法名”
v-on:click=“方法名”
v-on:mouseenter=“方法名”
v-on:dbclick=“多个单词连接得用单引号包住”
v-show=“获取双引号里的true或false , 默认是false”
v-bind:属性名=“获取双引号里的true或false , 默认是false”

数据/数组的赋值/展示

<body>
    <div id="app">
        {
  { message }}<!-- hello Vue! -->
        <h3>{
  {name}}</h3><!-- PengHehe -->
        <!-- 上面的name和下面的name是不同的 -->
        {
  {information.name}}<!-- HehePeng -->
        <h3>{
  {information.number}}</h3><!-- 123456 -->
        <!-- 取数组 -->
        <ul>
            <li>{
  {campus[0]}}</li><!-- 广东 -->
            <li>{
  {campus[1]}}</li><!-- 上海 -->
            <li>{
  {campus[2]}}</li><!-- 北京 -->
        </ul>
    </div>
    <!-- 选择器的后面 写 与之对应的script标签 -->
    <script>
        var app = new Vue({
     //这个app是实例名称(可自己改 , var smdx = new Vue)
            //下面的el和data是固定代码
            el: "#app",//这个#app是上面body里面的id="app"选择器的名称(一一对应,相互关联,一个改了一个也得改)
            data: {
     //下面的message和上面的message (一一对应,相互关联,一个改了一个也得改)可以改但是得对应起来
                message: 'hello Vue!',
                name: 'PengHehe',
                information: {
      name: 'HehePeng', number: '123456' },
                campus: ['广东', '上海', '北京']
}})</script>
</body>

v-text / { { 变量名 }} (替换标签内的文本以及表达式的拼接)

<body>
    <div id="app">
        <h3>{
  { message }}变量message对应的 值 和这句话拼接起来</h3><!-- hello Vue!变量message对应的 值 和这句话拼接起来 -->
        <h3 v-text="name">只会输出变量name对应的 值</h3><!-- PengHehe -->
        
        <h3>{
  { message + '拼接' }}有保留</h3><!-- hello Vue!拼接有保留 -->
        <h3 v-text="name + '单引号放在双引号里面'